Using Angular filter with pagination

All we need is an easy explanation of the problem, so here it is.

I am using a filter on an array of items in a ng-repeat like this:

<input type="text" ng-model="filterText">

<li ng-repeat="item in displayItems | filter : {item_name: filterText}>

This works fine and filters the items perfectly.The problem arises because I am using displayItems with a uib-pagination element. The pagination uses totalItems instead of displayItems.

<uib-pagination class="pagination-sm pagination"
    total-items="totalItems.length" ng-model="page" ng-change="changeItems()">

Obviously I need to somehow apply the filter on the total-items, then create the displayItems, and put the filteredItems in the uib-pagination.

Ie. When the person types, in the controller the filter is applied to the totalItems, and I create the filteredItems needed for the pagination. I also then create the displayItems from the filteredItems. How do I go about putting this into the controller and not in the HTML for the ng-repeat?

I’m not sure how to do this. Any thoughts? All help much appreciated….

I’ve included a plunker to show it (not) working in all its glory….

How to solve :

I know you bored from this bug, So we are here to help you! Take a deep breath and look at the explanation of your problem. We have many solutions to this problem, But we recommend you to use the first method because it is tested & true method that will 100% work for you.

Method 1



<li ng-repeat="item in filterData = (totalItems | filter : {itemName: filterText}) | limitTo:3:3*(page-1)">


<uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
        ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>


$scope.pageChanged = function() {
  //var startPos = ($ - 1) * 3;
  //$scope.displayItems = $scope.totalItems.slice(startPos, startPos + 3);

Method 2

You can access the filtered array by using as alias in ng-repeat expression

<li ng-repeat="item in displayItems | filter : {item_name: filterText} as filteredArray">

Then use that alias for total-items in pagination

<uib-pagination class="pagination-sm pagination"
    total-items="filteredArray.length" ng-model="page" ng-change="changeItems()">

Method 3

This is what I have done to make it work:

    var vm = this;
    vm.objects = [];
    vm.filterData = [];


    vm.totalItems = vm.filterData.length;
    vm.currentPage = 1;
    vm.numPerPage = 5;
    vm.paginate = paginate;
    vm.filterItems = filterItems;

    function paginate(value) {
        var begin, end, index;
        begin = (vm.currentPage - 1) * vm.numPerPage;
        end = begin + vm.numPerPage;
        index = vm.filterData.indexOf(value);
        return (begin <= index && index < end);

    function getAllRecords(vm) {

        $'Get Data from Backend'
        ).then(function successCallback(response) {
            vm.objects =;
            // you can pass blank space at first where you don't know the filter items
        }, function errorCallback(response) {



    function filterItems(searchValue) {
        // i am writing this condition because I want to get the search updated even 
       //if you delete one space from the field
        if(searchValue === undefined || searchValue === "") {
        } else {
            var data = $filter('filter')(vm.objects, searchValue , false, '')
            vm.currentPage = 1;


    function setDisplayItems(data){
        vm.filterData = data;
        vm.totalItems  = data.length;

HTML Code:

    <table >
        <tr ng-repeat="obj in filterData | filter : paginate ">


     <ul uib-pagination total-items="totalItems" ng-model="currentPage"  max-size="5" boundary-links="true" items-per-page="numPerPage" ></ul>


Method 4

Here I am providing solution with ngx-pagination

// install ngx-pagination
npm install ngx-pagination --save

<pagination-controls (pageChange)="p = $event"></pagination-controls>

<div *ngFor="let item of items | filter: filterParam | paginate: { itemsPerPage: 6, currentPage: p }"> </div>

Method 5

Please Change This type But if you search only one field related why you search specific. that no need if you have more field then you make it . That’s your code into some modify i hope sure it’s working.

<!DOCTYPE html>

    <link rel="stylesheet" href="//" rel="nofollow noreferrer noopener" />
    <script src=""></script>
    <script src="//"></script>
    <link rel="stylesheet" href="style.css" rel="nofollow noreferrer noopener" />
    <script src="script.js"></script>

  <body ng-app="myModule" ng-controller="myController">

    <input type="text" class="form-control advertise-filter-input sharp-corners"
      placeholder="Filter..." ng-model="filterText">


          <li ng-repeat="item in filterData = (displayItems | filter :  filterText)">


    <uib-pagination class="pagination-sm pagination" total-items="filterData.length" ng-model="page"
            ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;" items-per-page=3></uib-pagination>



Note: Use and implement method 1 because this method fully tested our system.
Thank you 🙂

All methods was sourced from or, is licensed under cc by-sa 2.5, cc by-sa 3.0 and cc by-sa 4.0

Leave a Reply