Untitled

<!DOCTYPE html>
<html>

  <head>
    <script data-require="jquery@2.1.3" data-semver="2.1.3" src="http://code.jquery.com/jquery-2.1.3.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/ng-table/0.3.3/ng-table.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" />
    <link rel="stylesheet" href="http://ng-table.com/dist/ng-table.min.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="app">
    <div class="container" ng-controller="test">
      <div class="page-header">
        <h3>Reload filtered data with <code>ng-table</code></h3>
      </div>
      <strong>Directions:</strong>
      <p>Filter <strong>Name</strong> by "saur" as in "dinosaur" and then click "Add Person".</p>
      <button type="button" class="btn btn-default" ng-click="addPerson()">Add Person</button>
      <hr>
      <table ng-table="tableParams" show-filter="true" class="table">
        <tbody>
          <tr ng-repeat="user in $data">
            <td data-title="'Name'" filter="{name: 'text'}">
            {{user.name}}
          </td>
            <td data-title="'Age'">
            {{user.age}}
          </td>
          </tr>
        </tbody>
      </table>
    </div>
  </body>

</html>

console.clear();

(function(angular) {
  'use strict';

  angular.module('app', ['ngTable']);

  angular.module('app').controller('test', testController);

  testController.inject = ['$scope', '$filter', 'ngTableParams'];
  function testController($scope, $filter, ngTableParams) {
    var data = [{name:'Larry', age:25},
    {name:'Steven', age:33},
    {name:'Clifford', age:92},
    {name:'Bulbasaur', age:11},
    {name:'Gary', age:29},
    {name:'Dylan', age:35}];
    
    var count = 3;
    $scope.tableParams = new ngTableParams({
      page: 1,
      count: count,
      filter: {name:''}
    }, {
      total: data.length,
      getData: function($defer, params) {
        // use build-in angular filter
        var orderedData = params.filter() ?
                $filter('filter')(data, params.filter()) :
                data;

        $scope.users = orderedData.slice((params.page() - 1) * params.count(), params.page() * params.count());

        params.total(orderedData.length); // set total for recalc pagination
        $defer.resolve($scope.users);
      }
    });
    
    $scope.addPerson = function() {
      data.push({name:'Venosaur', age:21});
      $scope.tableParams.count(count);
      $scope.tableParams.reload();
    };
  }
}(angular));

/* Styles go here */