AngularJS does not pass data to JQuery DataTable - angularjs

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.