<!DOCTYPE html>
<html>

<head>
  
  <!-- JAVA Scripts -->
    
  <script data-require="angular.js@*" data-semver="1.2.0-rc3-nonmin" src="http://code.angularjs.org/1.2.0-rc.3/angular.js"></script>
  <script data-require="ng-table@*" data-semver="0.3.1" src="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.js"></script>
    
  <link data-require="ng-table@*" data-semver="0.3.1" rel="stylesheet" href="http://bazalt-cms.com/assets/ng-table/0.3.1/ng-table.css" />
  <link data-require="bootstrap-css@*" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" />

  <link rel="stylesheet" href="style.css" />
  <script src="script.js"></script>
</head>

<body ng-app="main">
  <div ng-controller="DemoCtrl">
  <p><strong>Page:</strong> {{tableParams.page()}}</p>
  <p><strong>Count per page:</strong> {{tableParams.count()}}</p>
  <table ng-table="tableParams" class="table">
    <tr ng-repeat="user in $data">
      <td data-title="'Name'">{{user.name}}</td>
      <td data-title="'Age'">{{user.age}}</td>
    </tr> 
  </table>
  
  <button ng-click='OnResetClick()'>Reset</button>
  <button ng-click='OnReloadClick()'>Reload</button>
 </div>
</body>

</html>
var app = angular.module('main', ['ngTable']).
controller('DemoCtrl', function($scope, ngTableParams) {
    
    var userList = [
            {name: "Moroni", age: 50},
            {name: "Tiancum", age: 43},
            {name: "Jacob", age: 27},
            {name: "Nephi", age: 29},
            {name: "Enos", age: 34}
        ];
        
    $scope.users = userList;
        
    $scope.tableParams = new ngTableParams({
        page: 1,            // show first page
        count: 2           // count per page
    }, {
        total: $scope.users.length, // length of data
        getData: function($defer, params) {
            params.total($scope.users.length);
            $defer.resolve($scope.users.slice((params.page() - 1) * params.count(), params.page() * params.count()));
        }
    });
        

    var Reset = function(){
      $scope.users.length = 0;
      $scope.tableParams.total($scope.users.length);
      $scope.tableParams.reload();
    };    

    $scope.OnResetClick = Reset;
    
    var Reload = function(){
      $scope.users = userList;
      var t = {name: "Agular", age: 2};
      $scope.users.push(t);
      //userList.push(t);
      $scope.tableParams.total($scope.users.length);
      $scope.tableParams.reload();
      $scope.tableParams.page(1);
      
    };
 
    //
    $scope.OnReloadClick = Reload;
});
body {
    padding: 10px !important;   
}

.ng-table {
    border: 1px solid #000;
}