Pagination is not working across the pages in Angular JS - angularjs

Question

I have implemented Pagination and Search in AngularJS but its working in only on displayed page.
Html file
<div id="home" class="tab-pane fade in active">
<div class="row"><div class="col-md-10"><h1 style="font-size: 25px;margin-bottom:26px;">Jobs</h1></div></div>
<div class="row">
<div class="col-md-0"></div>
<div class="col-md-10" style="margin-top:5px">
<div class="container">
<li style="list-style-type: none;display: inline-block;width: 85%;"> <form name="myForm" action="/action_page.php" method="get" class="adjust" style="margin-left:-26px;margin-top:2px;">
<input type="text" name="Keyword" placeholder="Keyword" class="borderclr" ng-model='search.jobTitle' style="border: 1px solid #ddd;padding: 10px;width: 48%;margin-left:5px;">
<input type="text" name="Location" placeholder="Location"class="borderclr" ng-model='search.location' style="border: 1px solid #ddd;padding: 10px;width: 50%;">
</form>
</li>
<li style="list-style-type: none;display: inline-block;">
<i class="fa fa-plus" title="Add Job" ng-click="openJobModal('add')" data-toggle="modal" data-target="#jobDetails"
style="margin-top: 33px; color: rgb(237,78,110);cursor: pointer;font-size: 22px;margin-left: -140px;outline:none;"></i>
</li>
</div>
<div class= row>
<div class="col-md-10"></div>
<div class="col-md-2"></div>
</div>
<div ng-repeat="Job in JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage)) | filter:search:strict">
<!-- <p style="font-size: 13px;color: #808080;padding: 18px;margin-left: 49px;">Found 395 Jobs</p> -->
<h3 style="font-size: 18px;color: #000;font-weight: 600;margin-top: 2px;margin-left: -4px;text-align:left;margin-bottom: -7px;">
Title : {{Job.jobTitle}}</h3>
<div class="row" style="margin-left:1px;">
<div class="col-md-8" style="margin-left: -16px;margin-top:6px"> <b> {{Job.location}} | {{Job.jobRate}} | {{Job.jobType}}</b></div>
<div class="col-md-1"><i class="fa fa-eye" title="View Job" ng-click="Jobview(Job.SerialNumber)" data-toggle="modal" data-target="#jobDetails" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
<div class="col-md-1"><i class="fa fa-trash" title="Delete Job" ng-click="JobDelete(Job.SerialNumber,Job.Publish)" style="margin-top:10px;cursor: pointer;color : rgb(237,78,110);font-size:22px;outline:none;"></i></div>
<div class="col-md-2"><button style="padding: 6px 22px;" ng-click="jobPublish('true',Job.SerialNumber)" type="button" ng-hide="{{Job.Publish}}" class="btn btn-success">Publish</button>
<button type="button" ng-click="jobPublish('false',Job.SerialNumber)" ng-show="{{Job.Publish}}" class="btn btn-warning">UnPublish</button>
</div>
</div>
<p style=" text-align: justify;text-justify: inter-word;">
<b>Description :</b>{{Job.jobDescription | limitTo: 400 }}{{Job.jobDescription.length > 400 ? '...' : ''}}</p>
<hr>
</div>
</div>
</div>
<div ng-show="JobDetails !=''" style="text-align: right;">
<pagination total-items="JobDetails.length" ng-model="currentPage" ng-change="pageChanged()" max-size="maxSize" class="pagination-sm" boundary-links="true" items-per-page="itemsPerPage"></pagination>
</div>
</div>
Script
$scope.JobDetails = [];
for(var i=response.data.length-1;i>=0;i--){
$scope.JobDetails.push(response.data[i]);
}
$scope.viewby = 5;
$scope.totalItems = $scope.JobDetails.length;
$scope.currentPage = 1;
$scope.itemsPerPage = $scope.viewby;
$scope.maxSize = 7; //Number of pager buttons to show
When i use search box and search , the results are only for that page . If we remove the pagination the search is working fine.
Can some one please help.

Answer 1

your search filter is applied to currant page items only therefore you get only filtered item that exist in this page.
you can do the following to solve the problem:
<div ng-repeat="Job in currentJobDetails | filter:search:strict">
in your pageChanged() function you can add:
function pageChanged(){
currentJobDetails = JobDetails.slice(((currentPage-1)*itemsPerPage), ((currentPage)*itemsPerPage));
}
you may also need to add search button and call function when is clicked:
function search(){
currentJobDetails = JobDetails;
}
this will search across all your items