how to display sorted data from complete object in angular js?

Question

I am trying to make demo of sorted data and display on table.Actually In my demo I am hitting a service got some data (2000) objects in that as a response.So I am display 50 objects at one time and using infinite scroll I load more data which is working fine .I am able to load more data when I scroll to bottom .There is buutton on my header "^" or "V" .Please check on header (left icon "V") Example "Account Name "V"" Using this I icon I need to sort my column .

Actually The issue is current it sorting the only 50 element which is display on screen .When user scroll to bottom and load more 50 element it sort 100 element so on..But it is not correct solution.I need to sort 2000 element (all object which is coming from service) and display first 50 elements and when user scroll to bottom it load more 50 elements can we do in using angular js

here is my code

http://plnkr.co/edit/rUxTGDqyrxVq9STdvDTV?p=preview

<ion-scroll scrollbar-y="true" delegate-handle="invoicegrid" ng-style="viewHeight">
  <div class="row" ng-repeat="column in invoice_records | limitTo: counter | orderBy: sortval:reverse track by $index" ng-class-odd="'odd-row'">
    <div class="col brd collapse-sm" ng-repeat="field in column.columns" ng-show="invoice_column_name[$index].checked && invoice_column_name[$index].fieldNameOrPath===field.fieldNameOrPath">{{field.value}}</div>
    <div class="col col-10 text-center brd collapse-sm"></div>
  </div>
</ion-scroll>
<ion-infinite-scroll immediate-check="false" on-infinite="loadMore(query)" distance="10%"></ion-infinite-scroll>

Java script

  $scope.setSort = function(idx, reverse){
    $scope.sortval = 'columns['+idx+'].value';
    $scope.reverse = reverse;
  };

Answer 1

You can call the order by on the results from your service:

$scope.total_invoice_records = $filter('orderBy')(data.records, 'columns['+idx+'].value', true)

Answer 2

Just change order of limitTo and orderBy in your repeater

orderBy: ... | limitTo : ...

 <div class="row" ng-repeat="column in invoice_records |  orderBy: sortval:reverse track by $index | limitTo: counter " ng-class-odd="'odd-row'">