AngularJS ng-repeat : orderBy not react on limitTo changes, works with old data only

Question

I have a ng-repeat with first 20 items via limitTo and its dynamic - i press "read more" +20 become visible.

Problem: i have orderBy and after "read more" it do order only for old data...

How can i fix that ?

-- controller --

$scope.items = [{"id":38,"updated_at":"02.05.2016"}, ... ];

$scope.showMore = function(){
    $scope.form.page_size += 20;
};

$scope.sortBy = function (propertyName) {
    $scope.propertyName = propertyName;
    $scope.reverse = (propertyName !== null && $scope.propertyName === propertyName) ? !$scope.reverse : false;
};

-- html --

<table>
      <thead>
          <tr>
              <th ng-click="sortBy('updated_at')">Updated</th>
          </tr>
      </thead>
      <tbody>
          <tr ng-repeat="(index, entry) in items | limitTo:form.page_size | orderBy:propertyName:reverse track by entry.id">
               ...
          </tr>
      </tbody>
</table>

<button type="button" ng-click="showMore()">Show More</button>

Answer 1

Put the limitTo at last in the ng-repeat expression as below:

<tr ng-repeat="(index, entry) in items | orderBy:propertyName:reverse track by entry.id 
    | limitTo:form.page_size">
  ...
</tr>