<!DOCTYPE html>
<html ng-app="GridApp">

  <head>
    <script data-require="angular.js@1.4.8" data-semver="1.4.8" src="https://code.angularjs.org/1.4.8/angular.js"></script>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet" data-semver="0.13.1" data-require="ui-bootstrap@0.13.1" />
    <link data-require="ui-grid@3.0.1" data-semver="3.0.1" rel="stylesheet" href="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.css" />
    <script data-require="ui-grid@3.0.1" data-semver="3.0.1" src="https://cdn.rawgit.com/angular-ui/bower-ui-grid/v3.0.1/ui-grid.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.14.3/ui-bootstrap-tpls.js" data-semver="0.14.3" data-require="ui-bootstrap-tpls@0.14.3"></script>
    <script src="script.js"></script>
  </head>

  <body ng-controller="GridController as ctrl">
    <h1>Angular ui-grid with ui-bootstrap pagination</h1>
    <div>
      <!--
        ui-bootstrap pagination control displaying first, prev, next, last
        buttons and three pages. Current page will center in the display.
        Uses the grid's data source and pagination size.
      -->
      <uib-pagination total-items="ctrl.importantCrucialData.length" 
        ng-model="ctrl.gridOptions.paginationCurrentPage"
        items-per-page="ctrl.gridOptions.paginationPageSize"
        boundary-links="true"
        direction-links="true"
        max-size="3"
        first-text="<<"
        previous-text="<"
        next-text=">"
        last-text=">>"
        rotate="true"></uib-pagination>
        
      <!--
        ui-grid setup for pagination.
        See gridOptions in the controller for configuration.
      -->
      <div id="myGrid" ui-grid="ctrl.gridOptions" class="grid" ui-grid-pagination></div>
    </div>
  </body>

</html>
(function() {

  function GridController() {
    var vm = this;
    
    // Just some data
    vm.importantCrucialData = [
          {toads: "17", frogs: "32", lizards: "19", chickens: "98"},
          {toads: "2", frogs: "0", lizards: "15", chickens: "4"},
          {toads: "22", frogs: "9", lizards: "7", chickens: "555"},
          {toads: "13", frogs: "7", lizards: "13", chickens: "43"},
          {toads: "4", frogs: "8", lizards: "12", chickens: "14"},
          {toads: "6", frogs: "44", lizards: "35", chickens: "42"},
          {toads: "33", frogs: "12", lizards: "66", chickens: "476"},
          {toads: "16", frogs: "88", lizards: "12", chickens: "32"},
          {toads: "77", frogs: "14", lizards: "0", chickens: "1"},
          {toads: "2", frogs: "2", lizards: "12", chickens: "3"},
          {toads: "46", frogs: "0", lizards: "3", chickens: "46"},
          {toads: "18", frogs: "1", lizards: "14", chickens: "134"},
          {toads: "6", frogs: "7", lizards: "73", chickens: "378"},
          {toads: "2", frogs: "6", lizards: "2", chickens: "9"},
          {toads: "93", frogs: "0", lizards: "6", chickens: "3"},
          {toads: "174", frogs: "3", lizards: "1", chickens: "87"},
          {toads: "1", frogs: "1", lizards: "82", chickens: "14"},
          {toads: "0", frogs: "1", lizards: "13", chickens: "8"},
          {toads: "89", frogs: "7", lizards: "187", chickens: "3"},
          {toads: "4", frogs: "9", lizards: "3728", chickens: "84"},
          {toads: "1", frogs: "2", lizards: "1", chickens: "31"},
          {toads: "8", frogs: "14", lizards: "0", chickens: "14"},
          {toads: "6", frogs: "87", lizards: "6", chickens: "89"},
          {toads: "5", frogs: "3", lizards: "1", chickens: "4372"},
          {toads: "90", frogs: "0", lizards: "5", chickens: "1"},
          {toads: "21", frogs: "1", lizards: "47", chickens: "0"},
          {toads: "7", frogs: "18", lizards: "1", chickens: "6"},
          {toads: "6", frogs: "32", lizards: "32", chickens: "37"},
          {toads: "8", frogs: "14", lizards: "87", chickens: "8"},
          {toads: "18", frogs: "44", lizards: "774", chickens: "2"},
          {toads: "3", frogs: "2", lizards: "31", chickens: "1"},
          {toads: "8", frogs: "76", lizards: "5", chickens: "3"},
          {toads: "1", frogs: "19", lizards: "11", chickens: "5"},
          {toads: "89", frogs: "3", lizards: "3728", chickens: "876"},
          {toads: "5", frogs: "0", lizards: "6", chickens: "3"},
          {toads: "3", frogs: "1", lizards: "3", chickens: "2"},
          {toads: "22", frogs: "3", lizards: "53", chickens: "1"},
          {toads: "97", frogs: "8", lizards: "72", chickens: "3"},
          {toads: "3", frogs: "6", lizards: "1", chickens: "2"},
          {toads: "1", frogs: "14", lizards: "5", chickens: "99"},
          {toads: "7", frogs: "0", lizards: "1", chickens: "6"}
      ];

    // Configure the grid for a pagination size of 10, but don't show
    // the grid's own pagination controls.
    vm.gridOptions = {
      paginationPageSize: 10,
      enablePaginationControls: false,
      data: vm.importantCrucialData
    }
  }
  
  angular.module('GridApp', [
      'ui.grid',
      'ui.grid.pagination',
      'ui.bootstrap'
    ]);
    
  angular.module('GridApp')
    .controller('GridController', ['uiGridConstants', GridController]);

})()

Angular ui-grid table with ui-bootstrap pagination.