Angular datatables - reload example

<!DOCTYPE html>
<html>

<head>
    <link rel="stylesheet" href="//cdn.datatables.net/1.10.1/css/jquery.dataTables.css" />
</head>

<body ng-app="datatablesSampleApp">
<div ng-controller="sampleCtrl">

  Related to: <a href="https://stackoverflow.com/q/32961172/1407478" target=_blamk>
   stackoverflow.com/questions/32961172/angular-store-data-and-reload-datatable
  </a>
  <br><br>
  
  <button ng-click="reloadData();">reload</button> 
   <table datatable 
     dt-options="dtOptions" 
     dt-instance="dtInstance" 
     dt-columns="dtColumns">
    </table>
     
</div>
<script data-require="jquery@1.10.1" data-semver="1.10.1" src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.1/js/jquery.dataTables.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/q.js/0.9.2/q.js"></script>
<script data-require="angular.js@1.2.15" data-semver="1.2.15" src="http://code.angularjs.org/1.2.15/angular.js"></script>
<script src="https://rawgithub.com/l-lin/angular-datatables/v0.6.1/dist/angular-datatables.js"></script>
<script src="script.js"></script> 
</body>

</html>

(function(angular) {
    'use strict';
    angular.module('datatablesSampleApp', ['datatables']).
    controller('sampleCtrl', function($scope, DTOptionsBuilder, DTColumnBuilder, DTColumnDefBuilder) {
      
    $scope.dtColumns = [
       DTColumnBuilder.newColumn('id').withTitle('id'),
       DTColumnBuilder.newColumn('name').withTitle('name'),
       DTColumnBuilder.newColumn('count').withTitle('count')
    ];  
    

    $scope.dtInstance = {};
    
    $scope.dtOptions = DTOptionsBuilder
      .fromSource('data.json')	 

    $scope.reloadData = function() {
       $scope.dtInstance._renderer.rerender(); 
    }
    

    });
})(angular);

[
 {
  "id": 1,
  "name" : "abc",
  "count": "(20)"
 },
 {
  "id": 2,
  "name" : "abc2",
   "count": "20"
 },
{ 
  "id": 3,
  "name" : "abc3",
  "count": "(30)"
 },
 { 
  "id": 4,
  "name" : "xyz",
  "count": "(5)"
 }
 
]