title: AngularJS Pagination - Get Current Page and Pass to Controller
body: <p>I am implementing server-side sorting and pagination, and I need to pass the current page that the user is on so that if they sort and are on a page different than the first page (ex. sort by "least votes" on page 5 does not show the resorted results from page 1 on page 5 but shows the resorted results that should be on page 5). Basically, I need in place sorting but can't figure out how to get the current page. </p>
  
  <p>Server side paging is working without issue, and I believe I am missing something simple here.</p>
  
  <p>HTML (please note that I am using this custom directive: <a href="https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination" rel="nofollow">https://github.com/michaelbromley/angularUtils/tree/master/src/directives/pagination</a>)</p>
  
  <pre><code>&lt;tr dir-paginate="article in articles | itemsPerPage:articlesPerPage" total-items="totalArticles" current-page="currentPage"&gt;
  
  &lt;td&gt;
      &lt;div class="col-md-1 voting well"&gt;
          &lt;div class="votingButton" ng-click="upVote(articlevote);"&gt;
              &lt;i class="glyphicon glyphicon-chevron-up"&gt;&lt;/i&gt;
          &lt;/div&gt;
          &lt;div class="badge badge-inverse"&gt;
              &lt;div&gt;{{article.articlevotes}}&lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="votingButton" ng-click="downVote(articlevote);"&gt;
              &lt;i class="glyphicon glyphicon-chevron-down"&gt;&lt;/i&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/td&gt;
  &lt;td&gt;{{article.articletitle}}&lt;/td&gt;
  &lt;td&gt;{{article.articlecategoryid}}&lt;/td&gt;
  &lt;td&gt;&lt;a ng-href="#article/{{article.id}}/{{article.articlelink}}"&gt;{{article.articletitle}}&lt;/a&gt;&lt;/td&gt;
  &lt;/tr&gt;
                  &lt;/table&gt;
  &lt;dir-pagination-controls on-page-change="pageChanged(newPageNumber)"&gt;&lt;/dir-pagination-controls&gt;
  </code></pre>
  
  <p>Controller</p>
  
  <pre><code>$scope.articles = [];
  $scope.totalArticles = 0;
  $scope.articlesPerPage = 10; // this should match however many results your API puts on one page
  $scope.currentPage = 1;
  
  
     // sort options
  $scope.sortoptions = [
  {
      label: 'Most Votes',
      value: 'articlevotes desc',
  },
  {
      label: 'Least Votes',
      value: 'articlevotes asc',
  }
  ];
  
  var sortBy = $scope.sortoptions[0].value;
  var currPage = $scope.currentPage; // Get current page
  console.log(currPage);
  
  // Initial page load
  getResultsPage(1, sortBy);
  
  $scope.update = function (articleSortOrder) {
      // get value of sort and log it
      console.log(articleSortOrder.value); 
      sortBy = articleSortOrder.value;
  
      // log current page and pass as parameter
      console.log(currPage);
      getResultsPage(currPage, sortBy); // need to make dynamic so it gets current page
  }
  
  $scope.pageChanged = function (newPage) {
      getResultsPage(newPage, sortBy);
  };
  
  function getResultsPage(pageNumber, sortorder) {
  
      // currently skipping by page number * articles per page
      pfcArticles.query({ $skip: (pageNumber - 1) * $scope.articlesPerPage, $top: $scope.articlesPerPage, $orderby: sortorder, $inlinecount: 'allpages' }, function (data) {
          $scope.articles = data.results;
          $scope.totalArticles = data.count; // Can change to hard number to reduce total items instead of LimitTo
      });
  }
  </code></pre>