AngularJS does not pass data to JQuery DataTable

Question

I am using datatables from datatables.net and am running into some issues with the AngularJS ng-repeat and values being populated into the table. I have added a button that will pass a value into the table and this works great. However, when I try to add sorting and scroll bar to the table it stops working. I'm not sure what I'm doing wrong here.

html

<div ng-controller="TodoCtrl" id="TodoCtrl">
        <table id="example" cellpadding="0" cellspacing="0" border="0" class="display table table-striped table-bordered table-condensed">
        <thead>
            <tr>
            <th>Bus Id</th>
            <th>X Cords</th>
            <th>Y Cords</th>
            <th>Event Type</th>
            <th>Time Stamp</th>
            </tr>
        </thead>
        <tbody>
            <tr ng-repeat="todo in todos"><td>{{todo.busId}}</td><td>{{todo.xCord}}</td><td>{{todo.yCord}}</td><td>{{todo.eventType}}</td><td>{{todo.timeStamp}}</td></tr>
        </tbody>
        </table>
        <form class="form-horizontal">
        <input type="text" ng-model="vbusId" ng-model-instant>
        <button class="btn" ng-click="addTodo()"><i class="icon-plus"></i>Add</button>
    </div>

jscript

function TodoCtrl($scope) { 
    $scope.todos = [];

    $scope.addTodo = function (vbusId, vxCord, vyCord, vposTimeStamp, veventType) {
        $scope.todos.push({busId:'vbusId', xCord:vxCord, yCord:vyCord, timeStamp:vposTimeStamp, eventType:veventType});
            }

}

table script

$(document).ready(function() {
    $('#example').dataTable( {
        "sScrollY": "200px",
        "bPaginate": false
    } );
} );

If I comment out the table script the dynamic table works and gets populated with the passed data. If i uncomment the table code the table shows up with the sorting and scroll bar but it will not accept the values. Can someone tell what I am missing?

Thanks a bunch!

Answer 1

You need to ensure that the datatables is being called AFTER angular has digested the page. Something like this:

function TodoCtrl($scope, $timeout) { 
    $scope.todos = [];

    $scope.addTodo = function (vbusId, vxCord, vyCord, vposTimeStamp, veventType) {
        $scope.todos.push({busId:'vbusId', xCord:vxCord, yCord:vyCord, timeStamp:vposTimeStamp, eventType:veventType});
            }

    $timeout(function(){
        $('#example').dataTable( {
            "sScrollY": "200px",
            "bPaginate": false
        } );
    }, 0, false);

}

However, flat mixing of angular and jquery in this way is a terrible idea. You really should be writting an angular directive to wrap the jquery plugin, or just not use jQuery at all.