Search in angularjs not working properly with angular bootstrap ui - angularjs

Question

i am using angular-ui bootstrap for pagination of a table and i have separate search input tag, the search input only searches the first set data from the paginated list, it does not search the subsequent paginated pages of the table, how do i search from the input for all the data.
HTML
<div ng-controller="IndexCtrl" >
<input class="form-control formcustom" id="exampleInputEmail2" ng-model="custquery" placeholder="Search for Tripsheets" autofocus>
<table class="table table-striped table-bordered table-condensed table-hover">
<tr ng-repeat="customer in customers | orderBy:'id':true | filter: paginate | filter: custquery">
<td>{{customer.id}}</td>
<td>
<span>{{customer.name}}</span>
</td>
<td>
<span>{{customer.address}}</span>
</td>
<td>
<span>{{customer.phone1}}</span>
</td>
<td>
<span >{{customer.phone2}}</span>
</td>
<td>
<span >{{customer.phone3}}</span>
</td>
<td>
<span>{{customer.phone4}}</span>
</td>
<td>
<span >{{customer.email}}</span>
</td>
</tr>
</table>
<pagination total-items="totalItems" ng-model="currentPage"
max-size="5" boundary-links="true"
items-per-page="numPerPage" class="pagination-sm">
</pagination>
</div>
JS
app.controller('IndexCtrl', function ($scope, customerFactory, tripsheetFactory, driverFactory, notificationFactory) {
$scope.customers = [];
$scope.addMode = false;
customerFactory.getCustomers().then(function(data){
$scope.customers = data.data;
$scope.totalItems = $scope.customers.length;
$scope.currentPage = 1;
$scope.numPerPage = 20;
$scope.paginate = function(value)
{
var begin, end, index;
begin = ($scope.currentPage - 1) * $scope.numPerPage;
end = begin + $scope.numPerPage;
index = $scope.customers.indexOf(value);
return (begin <= index && index < end);
};
});
});
customerFactory is the factory i created to fetch json data

Answer 1

The position of the customer in $scope.customers doesn't change so the paginate function will always filter out all but the first page of the full customers array. What you need is an intermediate result (another array) that holds the customers that pass the $scope.custquery filter. The paginate function needs to operate on that second, filtered array.
I couldn't see a way to do that declaratively so I injected filterFilter into the controller and added a watch on $scope.custquery to execute it.
I put together a plunk that shows the result.