Angular search filter doesn't search in entire table

Question

The problem is the search filter only finds records from the current page and I want it to find record from entire table. How can I do that?

<input type="text" placeholder="Search By Any..." ng-model="search.$"/>
<table dir="ltr" width="477" border="1" class="table table-striped table-bordered">
    <thead>
        <tr>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('name')">User</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('contentType')">Content Type</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('contentName')">Content Name</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('startTime')">Start Time</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('endTime')">End Time</a></th>
            <th><a style="font-size: 16px;" href="#" ng-click="changeSort('duration')">Duration(In Secs)</a></th>
        </tr>
    </thead>
    <tbody>
        <tr ng-repeat="record in filteredRecords | filter: search | orderBy:sort:reverse track by $index">
            <td>{{record.user}}</td>
            <td>{{record.contentType}}</td>
            <td>{{record.contentName}}</td>
            <td>{{record.startTime}}</td>
            <td>{{record.endTime}}</td>
            <td>{{record.duration}}</td>
        </tr>
    </tbody>
</table>
<pagination class="pull-right" style="cursor: pointer;" num-pages="numPages()" current-page="currentPage" on-select-page="pageChanged(page)"></pagination>

Angular code:

angular.module("contentViewStatusApp")
       .controller("contentViewStatusController", function($scope, contentViewStatusService){
    $scope.records = contentViewStatusService.list();
    $scope.currentPage = 1
    $scope.numPerPage = 10
    $scope.maxSize = 5;
    $scope.numPages = function(){
        return Math.ceil($scope.records.length / $scope.numPerPage);
    };
    $scope.changeSort = function(value){
        if ($scope.sort == value){
            $scope.reverse = !$scope.reverse;
            return;
        }
        $scope.sort = value;
        $scope.reverse = false;
    }
    $scope.$watch('currentPage + numPerPage', function(){
        var begin = (($scope.currentPage - 1) * $scope.numPerPage), end = begin + $scope.numPerPage;
        $scope.filteredRecords = $scope.records.slice(begin, end);
    });
});

Answer 1

You could do pagination using filters instead of creating another array. This way it would search through the entire array before being filtered down.

This page shows an example of pagination with filters.

Then you could just have the search query first and it should search through the whole array.

Update

Here's one with pagination that updates based on search text.

It watches the search text and updates the page range after filtering:

$scope.$watch('searchText.name', function (v) {
    $scope.currentPage = 0;
    $scope.pages = $scope.range();
});

Then the pageCount is updated based on the filtered results:

$scope.pageCount = function () {
    var pages = $filter('filter')($scope.items, $scope.searchText);
    return Math.ceil(pages.length / $scope.itemsPerPage);
};