title: jQuery DataTables recreation on data update with socket.io
body: <p>I'm using jQuery DataTables with socket.io on AngularJS, and I'm pushing an item to the data binding list on a socket message and digesting afterwards. When it happened, the datatable recreated itself instead of just updating the data and not working properly. I'm also randomly get the error *<a href="https://datatables.net/manual/tech-notes/3" rel="nofollow">Warning: Cannot reinitialise DataTable</a>, and when I do, the datatable failed to display.</p>
  
  <p><strong>JavaScript</strong></p>
  
  <pre><code>var app = angular.module('App', ['ui.bootstrap','ngAnimate', 'datatables']);
  app.factory('socket', function () {
      var socket = io.connect('http://' + document.domain + ':' + location.port + '/t');
      return socket;
  });
  
  app.controller('controller', function ($scope, socket, $timeout, DTOptionsBuilder, DTColumnBuilder) {
      $scope.data=[];
      $scope.headers = {'Name':'name','Title','title'}
      socket.on('data', function (d) {
          d = angular.fromJson(d);
          $scope.data.push(d);
          $scope.$digest();
      });
  
      $scope.dtOptions = DTOptionsBuilder.newOptions().withPaginationType('full_numbers').withOption('bInfo', false);
      $scope.dtColumns = [];
      $scope.dtInstance = {};
  
      for (key in $scope.headers) {
          $scope.dtColumns.push(DTColumnBuilder.newColumn($scope.headers[key]).withTitle(key));
      }
  });
  </code></pre>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>    &lt;table id="tbl" datatable="ng" dt-options="dtOptions" dt-columns="dtColumns" dt-instance="dtInstance"
             class="table table-striped row-border hover"&gt;
          &lt;tr class="fade" ng-model="d"
              ng-repeat="d in data"&gt;
  </code></pre>