title: ui-bootstrap pagination items-per-page not changing page size
body: <p>I hate asking this question, because it seems like all pagination questions have been answered.  However, I do not follow what is making the pagination pages shorten.  I believe that my example is very similar to other examples.</p>
  
  <p>I am getting the correct number of tabs, current page is changing correctly as well.  However, the length is not matching the assigned items-per-page limit.</p>
  
  <p>Here is my controller</p>
  
  <pre><code>viewsModule.controller('CountryCtrl', ['$scope', 'cacCountries', function($scope, cacCountries) {
  
  $scope.loading = true;
  $scope.countries = [];
  $scope.currentPage = 1;
  $scope.itemsPerPage = 20;
  $scope.maxSize = 20;
  
  cacCountries().then(function(countries) {
      // console.log(countries);
      $scope.loading = false;
      $scope.countries = countries;
      $scope.totalItems = countries.length;
  
  });
  </code></pre>
  
  <p>}]);</p>
  
  <p>I have set my itemsPerPage to 20</p>
  
  <p>In my html I made sure to reference the itemsPerPage</p>
  
  <pre><code>&lt;pagination  
          total-items="totalItems" 
          items-per-page= "itemsPerPage"
          ng-model="currentPage" 
          class="pagination-sm"&gt;
  &lt;/pagination&gt;
  </code></pre>
  
  <p>I am getting back 13 tabs for 250 objects in the array.  However, all 250 objects are showing up.  I am expecting 20 per page.</p>
  
  <p>The ng-repeat is plain</p>
  
  <pre><code>&lt;tr ng-repeat="country in countries |filter:search "&gt; 
  </code></pre>
  
  <p>What could I be missing that would bind current page?</p>