title: AngularJS Paging orderBy only affects displayed page
body: <p>Can anyone point me in the right direction to figure out a way to fix the way paging and orderBy work together in Angular?</p>
  
  <p>Currently, I can orderBy and page the results of the data[], but the orderBy filter only affects the each page individually. </p>
  
  <p>For example, if I sort in reverse order by ID, page 1 will list 10-1, and page 2 will list 15-11, as opposed to starting with 15 and going to 1 by the end of the second page.</p>
  
  <p>I have a basic fiddle here <a href="http://jsfiddle.net/ZbMsR/">http://jsfiddle.net/ZbMsR/</a></p>
  
  <p><strong>Here is my controller:</strong></p>
  
  <pre><code>function MyCtrl($scope) {
      $scope.currentPage = 0;
      $scope.pageSize = 10;
      $scope.orderBy = "-appId";
      $scope.data = [
          {'appId': 1}, {'appId': 2}, {'appId': 3}, {'appId': 4}, {'appId': 5}, {'appId': 6}, {'appId': 7}, {'appId': 8}, {'appId': 9},{'appId': 10}, {'appId': 11}, {'appId': 12}, {'appId': 13}, {'appId': 14}, {'appId': 15}
  ];
  
      $scope.numberOfPages=function(){
          return Math.ceil($scope.data.length/$scope.pageSize);                
      };
  }
  
  //We already have a limitTo filter built-in to angular,
  //let's make a startFrom filter
  app.filter('startFrom', function() {
      return function(input, start) {
          start = +start; //parse to int
          return input.slice(start);
      }
  });
  </code></pre>
  
  <p><strong>Here is the relevant portion of my View</strong></p>
  
  <pre><code> &lt;strong&gt;Sort By:&lt;/strong&gt; &lt;a ng-click="orderBy = 'appId'; reverse=!reverse"&gt;Newest&lt;/a&gt;
   &lt;ul&gt;
      &lt;li ng-repeat="item in data | startFrom:currentPage*pageSize | limitTo:pageSize | orderBy:orderBy:reverse"&gt;
          {{item.appId}}
      &lt;/li&gt;
   &lt;/ul&gt;
  </code></pre>