title: Angularjs Pagination issue when page size is chosen
body: <p>I am trying to use pagination like google in my page with angularjs. The user can choose how many elements will be shown in each page by choosing the number in a drop down list. The problem is that if the user chooses this value the first page is shown correctly and if I click an other page, for example page 2 it loads all the elements from the list. You can see below my code.</p>
  
  <p>This is my html code:</p>
  
  <pre><code>&lt;!-- page size dropdown list --&gt;
  &lt;div&gt;
      &lt;label class="control-label" for="input-limit"&gt;Show:&lt;/label&gt;
  &lt;/div&gt;
  &lt;div&gt;
      &lt;select id="input-limit" class="form-control" ng-model="inputLimit" ng-change="paginationLimit()" ng-options="item.name for item in inputLimitList"&gt;&lt;/select&gt;
  &lt;/div&gt;
  
  &lt;li ng-repeat="product in resultFiltered" &gt;
                  &lt;a ui-sref="single_product({id:product.productId})"&gt;&lt;span ng-bind="product.name"&gt;&lt;/span&gt;&lt;/a&gt;                        
  &lt;/li&gt;
  </code></pre>
  
  <p>This is my service for pagination </p>
  
  <pre><code>angular.module('myApp')
    .service('PagerService', function ()
    {
        // service definition
        var service = {};
  
        service.GetPager = GetPager;
  
        return service;
  
        // service implementation
        function GetPager(totalItems, currentPage, pageSize) {
            //alert(pageSize);
            // default to first page
            currentPage = currentPage || 1;
  
            // default page size is 10
            pageSize = pageSize || 10;
  
            // calculate total pages
            var totalPages = Math.ceil(totalItems / pageSize);
  
            var startPage, endPage;
            if (totalPages &lt;= 10) {
                // less than 10 total pages so show all
                startPage = 1;
                endPage = totalPages;
            } else {
                // more than 10 total pages so calculate start and end pages
                if (currentPage &lt;= 6) {
                    startPage = 1;
                    endPage = 10;
                } else if (currentPage + 4 &gt;= totalPages) {
                    startPage = totalPages - 9;
                    endPage = totalPages;
                } else {
                    startPage = currentPage - 5;
                    endPage = currentPage + 4;
                }              
            }
  
            // calculate start and end item indexes
            var startIndex = (currentPage - 1) * pageSize;
            var endIndex = Math.min(startIndex + pageSize - 1, totalItems - 1);
            // create an array of pages to ng-repeat in the pager control
            //var pages = _.range(startPage, endPage + 1);
            var pages = [];
            for (var i = startPage; i &lt;= endPage; i += 1) {
                pages.push(i);
            }
  
            // return object with all pager properties required by the view          
            return {
                totalItems: totalItems,
                currentPage: currentPage,
                pageSize: pageSize,
                totalPages: totalPages,
                startPage: startPage,
                endPage: endPage,
                startIndex: startIndex,
                endIndex: endIndex,
                pages: pages
            };
  
        }
    });
  </code></pre>
  
  <p>And this is my code in controller:</p>
  
  <pre><code>'use strict';
  
  angular.module("myApp")
    .controller('ProductCtrl', function ($scope, $state, $stateParams, $location, dataProvider, validationServices, $window, PagerService, $rootScope) {
  
        $scope.inputLimitList = [
          { id: 0, name: "15" },
          { id: 1, name: "20" },
          { id: 2, name: "30" },
          { id: 3, name: "40" },
          { id: 4, name: "50" }
        ];
        $scope.inputLimit = $scope.inputLimitList[0];
  
       var jsonGet = 'product/getAll'; 
  
            dataProvider.get(jsonGet).then(function (response) {
                $scope.result = response.data;
                $scope.totalItems = $scope.result.length;
                //alert("totalItems" + $scope.totalItems);
                if (!($scope.result.constructor === Array)) {
                    var array = new Array();
                    array.push($scope.result);
                    $scope.result = array;
  
                }
                pagination();
            });
        $scope.paginationLimit = function () {
            pagination();
        }
  
        function pagination() {
  
            $scope.pager = {};
            $scope.setPage = setPage;
  
            initController();
  
            function initController() {
                // initialize to page 1
                $scope.setPage(1);
            }
  
            function setPage(page) {
                if (page &lt; 1 || page &gt; $scope.pager.totalPages) {
                    return;
                }
                //alert($scope.inputLimit.name);
                // get pager object from service
                $scope.pager = PagerService.GetPager($scope.totalItems, page, $scope.inputLimit.name);
                // get current page of items  
                $scope.resultFiltered = $scope.result.slice($scope.pager.startIndex, $scope.pager.endIndex + 1);
            }
        }
    });
  </code></pre>
  
  <p>If I do not use a value from the dropdown, the service takes the page size by default to 10 and it works fine. The problem is if the user chooses a value. Can anyone help me? </p>