Angular Datatable - Filtering or sorting with "Angular Way" deleting rows

Question

I reduced my code to the smallest version with the error.

The point is, I create a table, the angular way, with an empty array for the Table rows.

After that, I fetch some data, and add it to that same array (with angular.copy)

Even though they are correctly added to the table itself, if I click on a column title to sort it, or try to filter by typing in the input box, the table deletes all the rows.

Could it be a problem with $digest or $apply?

I've created a codepen to reproduce Codepen

HTML

<table datatable="" dt-options="datatable.dtOptions" dt-column-defs="datatable.dtColumnDefs">
    <thead>
      <tr><th></th><th>ID</th><th>Comuna</th><th>Proyecto</th></tr>
    </thead>
    <tbody>
        <tr ng-repeat="doc in json">
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
        </tr>
      </tbody>
</table>    

Javascript

$scope.json = [];
    $scope.Load = function(){
        _.each(thaJson.d.results, function(doc, i) {
                $scope.json.push(angular.copy(doc))
      })    
  }

Answer 1

You need to set your datatable attribute to "ng" when using Angular Datatables the "angular way"

datatable="ng"

<table datatable="ng" dt-options="datatable.dtOptions" dt-column-defs="datatable.dtColumnDefs">
      <thead>
        <tr>
          <th></th>
          <th>ID</th>
          <th>Comuna</th>
          <th>Proyecto</th>
        </tr>
      </thead>
      <tbody>
        <tr ng-repeat="doc in json">
          <td>a</td>
          <td>b</td>
          <td>c</td>
          <td>d</td>
        </tr>
      </tbody>
    </table>