title: Angular - Adjust Pagination When Filtered
body: <p>I'm new to Angular, so go easy on me.</p>
  
  <p>My question is similar to <a href="https://stackoverflow.com/questions/18679765/angular-pagination-not-updating-when-bound-list-changes-due-to-filtering-on-an-i">this one</a>.  I'm doing something a little different, so the accepted answer isn't working for me.</p>
  
  <p>I'm using Angular UI Bootstrap's Pagination directive to paginate a dataset, and I'm using Angular filters to allow users to filter data for any column.</p>
  
  <p>The problem is that when the data is filtered, the user only sees the data on the page he's currently on.</p>
  
  <pre><code>$scope.applyFilter = function() {
      var begin = (($scope.currentPage - 1) * $scope.itemsPerPage);
      var end = begin + $scope.itemsPerPage;
      $scope.totalItems = $filter('filter')($scope.items).length;
      $scope.filteredItems = $filter('filter')($scope.items).slice(begin, end);
  };
  </code></pre>
  
  <p><a href="http://plnkr.co/edit/QWx5Kk9Etlo0o7BXy2eV" rel="nofollow noreferrer">Here's the full Plunker</a></p>
  
  <p>For example, if you key in a state of "GA" in the state filter (text box under the word "State"), no data is returned.  However, you can select page 4 and see the one record that meets the condition.</p>
  
  <p>What I would like to happen is for the pagination to automatically adjust, showing just one page of results with the correct record appearing to the user.</p>
  
  <p>I know that there are other grid directives that already have this functionality, but I'd prefer to not completely abandon my current approach.</p>