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.