title: AngularJS paging
body: <p>I made AngularJS pagination with spring mvc It works well ,but the application get a large amount of data from database so the application is very slow when I get first page because it get all records,Can anyone help me to solve this problem?I want to get subset of data from database depending on angularJS pagination    </p>
  
  <p>Spring mvc Controlller</p>
  
  <pre><code>@RequestMapping(value = "/rest/contacts",
          method = RequestMethod.GET,
          produces = MediaType.APPLICATION_JSON_VALUE)
  @Timed
  public List&lt;Contact&gt; getAll() {
      return contactRepository.findAll();
  } 
  </code></pre>
  
  <p>AngularJS Service</p>
  
  <pre><code>pagingpocApp.factory('Contact', function ($resource) {
      return $resource('app/rest/contacts/:id', {}, {
          'query': { method: 'GET', isArray: true},
          'get': { method: 'GET'}
      });
  
  
  });
  </code></pre>
  
  <p>AngularJS Controller</p>
  
  <pre><code>  pagingpocApp.controller('ContactController', function ($scope,  $filter,resolvedContact, Contact, resolvedRole) {
  
      $scope.contacts = resolvedContact;
  
          var sortingOrder = 'firstName';
          $scope.sortingOrder = sortingOrder;
          $scope.reverse = false;
          $scope.filteredItems = [];
          $scope.groupedItems = [];
          $scope.itemsPerPage = 10;
          $scope.pagedItems = [];
          $scope.currentPage = 0;
  
          var searchMatch = function (haystack, needle) {
              if (!needle) {
                  return true;
              }
              return haystack.toLowerCase().indexOf(needle.toLowerCase()) !== -1;
          };
  
          // init the filtered items
          $scope.search = function () {
              $scope.filteredItems = $filter('filter')($scope.contacts, function (item) {
                  for(var attr in item) {
                      if (searchMatch(item[attr], $scope.query))
                          return true;
                  }
                  return false;
              });
              // take care of the sorting order
              if ($scope.sortingOrder !== '') {
                  $scope.filteredItems = $filter('orderBy')($scope.filteredItems, $scope.sortingOrder, $scope.reverse);
              }
              $scope.currentPage = 0;
              // now group by pages
              $scope.groupToPages();
          };
  
          // calculate page in place
          $scope.groupToPages = function () {
              $scope.pagedItems = [];
  
              for (var i = 0; i &lt; $scope.filteredItems.length; i++) {
                  if (i % $scope.itemsPerPage === 0) {
                      $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)] = [ $scope.filteredItems[i] ];
                  } else {
                      $scope.pagedItems[Math.floor(i / $scope.itemsPerPage)].push($scope.filteredItems[i]);
                  }
              }
          };
  
          $scope.range = function (start, end) {
              var ret = [];
              if (!end) {
                  end = start;
                  start = 0;
              }
              for (var i = start; i &lt; end; i++) {
                  ret.push(i);
              }
              return ret;
          };
  
          $scope.prevPage = function () {
              if ($scope.currentPage &gt; 0) {
                  $scope.currentPage--;
              }
          };
  
          $scope.nextPage = function () {
              if ($scope.currentPage &lt; $scope.pagedItems.length - 1) {
                  $scope.currentPage++;
              }
          };
  
          $scope.setPage = function () {
              $scope.currentPage = this.n;
          };
  
          // functions have been describe process the data for display
          $scope.search();
  
          // change sorting order
          $scope.sort_by = function(newSortingOrder) {
              if ($scope.sortingOrder == newSortingOrder)
                  $scope.reverse = !$scope.reverse;
  
              $scope.sortingOrder = newSortingOrder;
  
              // icon setup
              $('th i').each(function(){
                  // icon reset
                  $(this).removeClass().addClass('icon-sort');
              });
              if ($scope.reverse)
                  $('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-up');
              else
                  $('th.'+new_sorting_order+' i').removeClass().addClass('icon-chevron-down');
          };
  
  });
  </code></pre>