How to make AngularJs UI boostrap Pagination work with data - angular-ui-bootstrap

Question

I'm using the pagination custom build from here
I don't know how to make the pagination buttons work with my data. Do I have to filter it somehow?
This is where I display my data:
<div class="col-xs-12 col-md-4 content appear" ng-repeat="post in filterPosts | filter:searchPost | orderBy: sorting.orderBy:sorting.direction | filter : filterPost track by post.id">
After that, This is where the pagination part is:
<div ng-controller="PaginationController" class="col-xs-12" style="height: 50px;">
<pagination class="pagination" style="right: 10px; position: absolute; margin: 0px;" total-items="total_items" ng-model="bigCurrentPage" max-size="maxSize" class="pagination-sm" boundary-links="true" rotate="false" num-pages="numPages"></pagination></div>
There is a plunker example for the pagination part, but there's no data involved. Here is the link

Answer 1

Yes, you need to filter your data. The pagination directive just gives you a way to present to the user the list of possible pages and lets the user easily control the current page. You need to use the page size (defaults to 10) and the current page value to filter the data and display the correct page.
One way to do this is to add an additional filter to help with skipping:
app.filter('offset', function() {
return function(input, start) {
return input.slice(start);
};
})
and then use this with limitTo to control the paging
<div class="col-xs-12 col-md-4 content appear"
ng-repeat="post in filterPosts | filter:searchPost
| orderBy: sorting.orderBy:sorting.direction
| filter : filterPost track by post.id
| offset: (bigCurrentPage - 1) * 10
| limitTo: 10">
Example JSFiddle here