jQuery datatable and angularjs - Update the scope, causes the view to be empty

[Mosh Feu]

Description

I'm using AngularJS
I have a table that I want to show it as "Data Table" using DataTable jQuery plugin (http://datatables.net/docs/DataTables/1.9.4/DataTable.html).

The logic

1. Create table table markup.
2. Add ng-repeat using $scope.entities on the row .
3. Run the plugin on the table.

The problem

In the first time that I run it, everything is OK.
The problem start when I need to change the $scope.entities (For example: user select another list)

In the snippets below I was created simpler scenario but the logic is same.

Steps

1. Run the snippet (probably done automatic).
2. Click on destroy button. It will destroy the plugin and return the table to original html.
3. Click on Add row. It should add row to the table The problem is that all the rows were deleted instead of adding the row.

Note I saw some angular directives who integrating with the plugin (datatable). I can't using it. I need to understand why the view nodes are deleting.

http://jsbin.com/zujedo

[Todd Branchflower]

It looks like the `('table').dataTable()` call overwrites the table and kills your `ng-repeat` directive.  It is bad practice to use jquery calls within controllers.  Try your best not to use jquery.  If you must, use it isolate it in the `link` function of a directive.