AngularJS dirPaginate Only Filtering current page

Question

I have included dir paginate into my angularjs project to handle pagination easily, it works well up until the point where I want to filter all the pages results.

The controller that contains the data and filter looks like so:

app.controller('listCtrl', function ($scope, services) {
        $scope.sort = function(keyname){
        $scope.sortKey = keyname;   //set the sortKey to the param passed
        $scope.reverse = !$scope.reverse; //if true make it false and vice versa
    }

      $scope.currentPage = 1;
      $scope.pageSize = 10;
    services.getPosts().then(function(data){
      $scope.posts = data.data;
    });  
});

The dir-paginate looks like so

<div dir-paginate="data in posts | itemsPerPage:5 | orderBy:sortKey:reverse" class="col-xs-12 post">
                    <div id="title" class="col-xs-3"></div>
                    <div id="title" class="col-xs-9"></div>

                    <div id="poster" class="col-xs-3">
                        <img src="pics/house.jpg" id="avatar">
                        <a ng-if="data.user_name == '<?php echo $currentUser?>'" href="edit-post/{{data.post_id}}"> Edit </a>
                    </div>
                    <div class="col-xs-9">
                        <div class="col-xs-12">
                            <p class="timestamp">{{ data.post_datetime }}</p>
                        </div>
                        <div id="rant">
                            <span style="word-wrap: break-word;">{{ data.post_content }}</span>
                        </div>
                        <div id="stats" class="col-xs-12">                                <a href="#"><img src="pics/comment.png"></a><span>3</span>

                        </div>
                    </div>
                </div>

 <dir-pagination-controls
        max-size="5"
        direction-links="true"
        boundary-links="true" >
    </dir-pagination-controls>

I call the sort function like so:

<button id="changeLikes" ng-click="sort('post_id')">ID</button>

It only sorts the current page of Data, if i use the pagination and click page 2 it will then only filter page 2 and so on, any ideas here would be of great help getPosts() returns post data via php with no group or order by clauses in the sql that would affect the angular.

Answer 1

Have you tried flipping the order of the filters, i.e.

<div dir-paginate="data in posts | orderBy:sortKey:reverse | itemsPerPage:5" class="col-xs-12 post">

The dir-paginate docs state:

itemsPerPage: The expression must include this filter. It is required by the pagination logic. The syntax is the same as any filter: itemsPerPage: 10, or you can also bind it to a property of the $scope: itemsPerPage: pageSize. Note: This filter should come after any other filters in order to work as expected. A safe rule is to always put it at the end of the expression.