使用ng-repeat在列表上分页

Question

我正在尝试将页面添加到我的列表中。我遵循了有关智能手机的AngularJS教程，我试图仅显示一定数量的对象。这是我的html文件：

  <div class='container-fluid'>

    <div class='row-fluid'>

        <div class='span2'>

            Search: <input ng-model='searchBar'>

            Sort by: 

            <select ng-model='orderProp'>

                <option value='name'>Alphabetical</option>

                <option value='age'>Newest</option>

            </select>

            You selected the phones to be ordered by: {{orderProp}}

        </div>

        <div class='span10'>

          <select ng-model='limit'>

            <option value='5'>Show 5 per page</option>

            <option value='10'>Show 10 per page</option>

            <option value='15'>Show 15 per page</option>

            <option value='20'>Show 20 per page</option>

          </select>

          <ul class='phones'>

            <li class='thumbnail' ng-repeat='phone in phones | filter:searchBar | orderBy:orderProp | limitTo:limit'>

                <a href='#/phones/{{phone.id}}' class='thumb'><img ng-src='{{phone.imageUrl}}'></a>

                <a href='#/phones/{{phone.id}}'>{{phone.name}}</a>

                <p>{{phone.snippet}}</p>

            </li>

          </ul>

        </div>

    </div>

  </div>

我添加了带有某些值的select标签，以限制将要显示的项目数。我现在想要的是添加分页以显示下一个5、10等。

我有一个与此相关的控制器：

function PhoneListCtrl($scope, Phone){

    $scope.phones = Phone.query();

    $scope.orderProp = 'age';

    $scope.limit = 5;

}

而且我还有一个模块，以便从json文件中检索数据。

angular.module('phonecatServices', ['ngResource']).

    factory('Phone', function($resource){

        return $resource('phones/:phoneId.json', {}, {

            query: {method: 'GET', params:{phoneId:'phones'}, isArray:true}

        });

    });