title: How do I tell ui-Bootstrap what content to paginate?
body: <p>I am using ui-Bootstrap and I am trying to get the pagination working but I seem to be missing something. I have read the documentation and looked at a bunch of plunkers to try and work out how they are specifying which content to paginate but I am having no luck.</p>
  
  <p>Here is what I have done <a href="http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview" rel="noreferrer">http://plnkr.co/edit/5mfiAcOaGw8z8VinhIQo?p=preview</a></p>
  
  <pre><code>&lt;section class="main" ng-controller="contentCtrl"&gt;
    &lt;div ng-repeat="friend in friends"&gt;
      {{friend.name}}
    &lt;/div&gt;
    &lt;pagination total-items="totalItems" items-per-page="itemsPerPage" ng-model="currentPage" ng-change="pageChanged()"&gt;&lt;/pagination&gt;
  
    &lt;p&gt;
      total Items: {{totalItems}}&lt;br /&gt;
      Items per page: {{itemsPerPage}}&lt;br /&gt;
      Current Page: {{currentPage}}
    &lt;/p&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>angular.module('plunker', ['ui.bootstrap'])
    .controller('contentCtrl', function ($scope) {
  
      $scope.friends = [
        {'name':'Jack'},
        {'name':'Tim'},
        {'name':'Stuart'},
        {'name':'Richard'},
        {'name':'Tom'},
        {'name':'Frank'},
        {'name':'Ted'},
        {'name':'Michael'},
        {'name':'Albert'},
        {'name':'Tobby'},
        {'name':'Mick'},
        {'name':'Nicholas'},
        {'name':'Jesse'},
        {'name':'Lex'},
        {'name':'Robbie'},
        {'name':'Jake'},
        {'name':'Levi'},
        {'name':'Edward'},
        {'name':'Neil'},
        {'name':'Hugh'},
        {'name':'Hugo'},
        {'name':'Yanick'},
        {'name':'Matt'},
        {'name':'Andrew'},
        {'name':'Charles'},
        {'name':'Oliver'},
        {'name':'Robin'},
        {'name':'Harry'},
        {'name':'James'},
        {'name':'Kelvin'},
        {'name':'David'},
        {'name':'Paul'}
      ];
  
      $scope.totalItems = 64;
      $scope.itemsPerPage = 10
      $scope.currentPage = 1;
  
      $scope.setPage = function (pageNo) {
        $scope.currentPage = pageNo;
      };
  
      $scope.pageChanged = function() {
        console.log('Page changed to: ' + $scope.currentPage);
      };
  
      $scope.maxSize = 5;
      $scope.bigTotalItems = 175;
      $scope.bigCurrentPage = 1;
    });
  </code></pre>