title: AngularJS and DataTables integration
body: <p>I am adding a new row to DataTable and it's not being picked up by AngularJS. Can anybody show how to tie these two? Basically, I need that new row behave like the original row, i.e. execute callGetRow function. Any help is much appreciated.</p>
  
  <pre><code>&lt;html ng-app&gt;
  &lt;head&gt;
      &lt;title&gt;Example&lt;/title&gt;
  
      &lt;script src="http://code.jquery.com/jquery-1.11.3.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://cdn.datatables.net/1.10.10/js/jquery.dataTables.min.js"&gt;&lt;/script&gt;
      &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js"&gt;&lt;/script&gt;
  
  &lt;script&gt;
  function RESTCall($scope, $http) {  
      $scope.callGetRow = function(line) {
          alert(line);
      };
  
      $scope.callAddNew = function() {
          $('#example').DataTable().row.add(["2.0","Item 2", "Generic Desc", "2", 200]).draw();
      };      
  }
  
  &lt;/script&gt;       
  &lt;/head&gt;
  
  &lt;body&gt;
  
  &lt;div ng-controller="RESTCall"&gt;
      &lt;table class="compact" id="example" cellspacing="0" &gt;
          &lt;thead&gt;
              &lt;tr&gt;
                  &lt;th&gt;&lt;/th&gt;
                  &lt;th&gt;Item&lt;/th&gt;
                  &lt;th&gt;Description&lt;/th&gt;
                  &lt;th&gt;Qty&lt;/th&gt;
                  &lt;th&gt;List $&lt;/th&gt;
              &lt;/tr&gt;
          &lt;/thead&gt;
  
          &lt;tbody&gt;
              &lt;tr ng-click="callGetRow('1/0')" id="1.0"&gt;
                  &lt;td&gt;1.0&lt;/td&gt;
                  &lt;td&gt;Item 1&lt;/td&gt;
                  &lt;td&gt;Generic Description&lt;/td&gt;
                  &lt;td&gt;3&lt;/td&gt;
                  &lt;td&gt;100&lt;/td&gt;
              &lt;/tr&gt;
          &lt;/tbody&gt;
      &lt;/table&gt;
  
  &lt;button class="btn" type="button" ng-click="callAddNew()"&gt;Add new&lt;/button&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>