title: Angular pagination not updating when bound list changes due to filtering on an input text box
body: <p>Here's the scenario:</p>
  
  <p>I am using an ASP.NET MVC site with Angular JS and Boostrap UI. I have a dynamic ul list populated by data fed through a controller call to AngularJS, filtering on that list through an input search box. The list is also controlled through pagination (UI Bootstrap control) that I've setup to show 10 results per page for the list of 100 or so items. This list is filtered as the user types in the search box, however I would like the pagination to update as well so consider the following example:</p>
  
  <p>The list has 10 pages of items (100 items), the user types some text in the input search box which filters the list down to 20 or so items, so the pagination should be updated from 10 pages to two pages.</p>
  
  <p>I figure there must be a $watch setup somewhere, perhaps on the list items after it has been filtered and then update the pagination page count, however I'm pretty new to AngularJS so can someone please explain to me how this could be done?</p>
  
  <p>Thanks very much. I have posted my code below:</p>
  
  <pre><code>&lt;div data-ng-app="dealsPage"&gt;
  &lt;input type="text" data-ng-model="cityName" /&gt;
  &lt;div data-ng-controller="DestinationController"&gt;
      &lt;ul&gt;
          &lt;li data-ng-repeat="deals in destinations | filter: cityName |
              startFrom:currentPage*pageSize | limitTo:pageSize"&gt;{{deals.Location}}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;br /&gt;
      &lt;pagination rotate="true" num-pages="noOfPages" current-page="currentPage" 
                  max-size="maxSize" class="pagination-small" boundary-links="true"&gt;&lt;/pagination&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code> var destApp = angular.module('dealsPage', ['ui.bootstrap', 'uiSlider']);
  destApp.controller('DestinationController', function ($scope, $http) {
      $scope.destinations = {};
      $scope.currentPage = 1;
      $scope.pageSize = 10;
  
      $http.get('/Deals/GetDeals').success(function (data) {
          $scope.destinations = data;
          $scope.noOfPages = data.length / 10;
          $scope.maxSize = 5;
      });
  });
  
  destApp.filter('startFrom', function () {
      return function (input, start) {
          start = +start; //parse to int
          return input.slice(start);
      };
  });
  </code></pre>