title: ng-Grid Pagination not working - AngularJS
body: <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div class="grid-style" data-ng-grid="groupGrid"&gt;
       &lt;/div&gt;
  </code></pre>
  
  <p><strong>Javascript:</strong></p>
  
  <pre><code>appRoot.controller('GroupController', function ($scope, $location, $resource, $http) {
  
  var groupResource = $resource('/api/group', {}, { update: { method: 'PUT' }, add: {      method: 'POST'} });
  $scope.groupList = [];    
  
  groupResource.query(function (data) {
      $scope.groupList.length = 0;
      angular.forEach(data, function (groupData) {
          $scope.groupList.push(groupData);
      });
  });
  
  $scope.totalServerItems = 0;
  
  $scope.pagingOptions = {
      pageSizes: [4, 8, 12, 16],
      pageSize: 250,
      currentPage: 1
  };
  $scope.setPagingData = function (data, page, pageSize) {
      var pagedData = data.slice((page - 1) * pageSize, page * pageSize);
      $scope.groupList = pagedData;
      $scope.totalServerItems = data.length;
      $scope.currentPage = page;
      if (!$scope.$$phase) {
          $scope.$apply();
      }
  };
  
  $scope.getPagedDataAsync = function (pageSize, page, searchText) {
      setTimeout(function () {
          var data;
          if (searchText) {
              var ft = searchText.toLowerCase();
              $http.get('/api/group').success(function (largeLoad) {
                  data = largeLoad.filter(function (item) {
                      return JSON.stringify(item).toLowerCase().indexOf(ft) != -1;
                  });
                  $scope.setPagingData(data, page, pageSize);
              });
          } else {
              $http.get('/api/group').success(function (largeLoad) {
                  $scope.setPagingData(largeLoad, page, pageSize);
              });
          }
      }, 100);
  };
  
  $scope.getPagedDataAsync($scope.pagingOptions.pageSize,     $scope.pagingOptions.currentPage);
  
  $scope.$watch('pagingOptions', function (newVal, oldVal) {
      if (newVal !== oldVal &amp;&amp; newVal.currentPage !== oldVal.currentPage) {
          $scope.getPagedDataAsync($scope.pagingOptions.pageSize, $scope.pagingOptions.currentPage);
      }
  }, true);
  
  $scope.selectedGroups = [];
  
  $scope.groupGrid = {
      data: 'groupList',
      multiSelect: false,
      selectedItems: $scope.selectedGroups,
      enableColumnResize: false,                        
      enablePaging: true,
      showFooter: true,
      totalServerItems: 'totalServerItems',
      pagingOptions: $scope.pagingOptions,
      columnDefs: [
          { field: 'groupName', displayName: 'Group Name', width: '25%' }
      ],
  };
  });
  </code></pre>
  
  <p>My problem - Pagination is not working, as in
  - The current page number is not displayed.
  - When I change the page size (like say 4), the number of items in the grid doesn't change (remains 16 - total no. of items I actually have).
  - The number of items change in the grid only after clicking the next page button twice.</p>