AngularJS 1.4.x UI Router and UI Grid with pagination

var plunker = angular.module('plunker', ['ui.router','ui.grid','ui.grid.edit', 'ui.bootstrap', 'ui.grid.pagination']);


plunker.config(function($stateProvider,$urlRouterProvider) {
  
   $urlRouterProvider.otherwise('/home');
    
    $stateProvider
        
        // HOME STATES AND NESTED VIEWS ========================================
        .state('home', {
            url: '/home',
            templateUrl: 'partial-home.html'
        })
        
        .state('home.list',{
          url : '/list',
          'templateUrl' : 'partial-home-list.html',
          'controller' : function($scope,$http){
            var vm = this;
            var paginationOptions = {
              pageNumber: 1,
              pageSize: 25,
              sort: null
            };
            $scope.gridOptions = {
              enablePaginationControls: false,
              paginationPageSizes: [25, 50, 75],
              paginationPageSize: 25,
              useExternalPagination: true,
              useExternalSorting: true,
              columnDefs: [
                { name: 'name' , enableSorting: false },
                { name: 'gender', enableSorting: false },
                { name: 'company', enableSorting: false }
              ],
              onRegisterApi: function(gridApi) {
                $scope.gridApi = gridApi;
                console.log($scope.gridApi);
                gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {
                  paginationOptions.pageNumber = newPage;
                  paginationOptions.pageSize = pageSize;
                  getPage();
                });
              }
            };
          
            var getPage = function() {
              var url = 'https://cdn.rawgit.com/angular-ui/ui-grid.info/gh-pages/data/100.json';
              $http.get(url)
              .success(function (data) {
                $scope.gridOptions.totalItems = 100;
                var firstRow = (paginationOptions.pageNumber - 1) * paginationOptions.pageSize;
                $scope.gridOptions.data = data.slice(firstRow, firstRow + paginationOptions.pageSize);
              });
            };
          
            getPage();
          },
          'controllerAs' : 'homeList'
          
        })
        .state('home.paragraph', {
          url: '/paragraph',
          template: 'I could sure use a drink right now.'
        })
        
        // ABOUT PAGE AND MULTIPLE NAMED VIEWS =================================
        .state('about', {
           url: '/about',
           templateUrl: 'partial-about.html',
           controller : 'AboutCtrl',
           cotrollerAs : 'AboutCtrl'
        });
});

plunker.controller('AboutCtrl',function($scope,$uibModal) {
  $scope.animationsEnabled = true;
   $scope.animationsEnabled = true;

  $scope.open = function (size) {

    var modalInstance = $uibModal.open({
      animation: $scope.animationsEnabled,
      templateUrl: 'myModalContent.html',
      controller: 'ModalInstanceCtrl',
      size: size,
      resolve: {
        items: function () {
          return ['Hello','Tiny','Cloud'];
        }
      }
    });

    modalInstance.result.then(function (selectedItem) {
      $scope.selected = selectedItem;
    }, function () {
      console.log('Modal dismissed at: ' + new Date());
    });
  };

  $scope.toggleAnimation = function () {
    $scope.animationsEnabled = !$scope.animationsEnabled;
  };
});

plunker.controller('ModalInstanceCtrl',function($scope,$uibModal){ 
});

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

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <!-- CSS (load bootstrap) -->
    <link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
    <style>
        .navbar { border-radius:0; }
    </style>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.4.x" src="https://code.angularjs.org/1.4.8/angular.js" data-semver="1.4.8"></script>
    <script data-require="ui-router@*" data-semver="0.2.15" src="https://cdn.rawgit.com/angular-ui/ui-router/805e69bae319e922e4d3265b7ef565058aaff850/release/angular-ui-router.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.0/ui-grid.js"></script>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-grid/3.1.0/ui-grid.css" />
    <script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-1.1.1.js"></script>

    <script src="app.js"></script>
    
  </head>

  <body>
    <!-- NAVIGATION -->
    <nav class="navbar navbar-inverse" role="navigation">
        <div class="navbar-header">
            <a class="navbar-brand" ui-sref="#">AngularUI Router</a>
        </div>
        <ul class="nav navbar-nav">
            <li><a ui-sref="home">Home</a></li>
            <li><a ui-sref="about">About</a></li>
        </ul>
    </nav>

    <!-- MAIN CONTENT -->
    <div class="container">
    
        <!-- THIS IS WHERE WE WILL INJECT OUR CONTENT ============================== -->
        <div ui-view></div>
    
    </div>
  </body>

</html>

/* Put your css in here */

.grid {
  width: 600px;
}

<div class="jumbotron text-center">
    <h1>The About Page</h1>
   <button type="button" class="btn btn-default" ng-click="open('lg')">Large modal</button>
</div>

<div class="jumbotron text-center">
    <h1>The Homey Page</h1>
    <p>This page demonstrates <span class="text-danger">nested</span> views.</p>    
    
    <a ui-sref=".list"  class="btn btn-primary">List</a>
    <a ui-sref=".paragraph"  class="btn btn-danger">Paragraph</a>
</div>
<div ui-view></div>

<ul>
    <li ng-repeat="dog in homeList.dogs">{{ dog }}</li>
</ul>
<div ui-grid="gridOptions" ui-grid-pagination class="grid"></div>
<button type="button" class="btn btn-success" ng-click="gridApi.pagination.seek(1)">
  First
</button>
<button type="button" class="btn btn-success" ng-click="gridApi.pagination.previousPage()">
  Previous
</button>
<button type="button" class="btn btn-success" ng-click="gridApi.pagination.nextPage()">
  Next
</button>
<button type="button" class="btn btn-success" ng-click="gridApi.pagination.seek( gridApi.pagination.getTotalPages())">
  Last
</button>

<div class="modal-header">
    <h3 class="modal-title">I'm a modal!</h3>
</div>
<div class="modal-body">
  <ul>
      <li ng-repeat="item in items">
          <a href="#" ng-click="$event.preventDefault(); selected.item = item">{{ item }}</a>
      </li>
  </ul>
  Selected: <b>{{ selected.item }}</b>
</div>
<div class="modal-footer">
    <button class="btn btn-primary" type="button" ng-click="ok()">OK</button>
    <button class="btn btn-warning" type="button" ng-click="cancel()">Cancel</button>
</div>