Угловая сортировка столбцов по всем страницам на стороне клиента

Я пытаюсь заставить это работать и видеть, есть ли быстрое простое решение - прямо сейчас у меня есть таблица, в которой я занимаюсь поиском и сортировкой по всем на клиентской стороне. В настоящее время при загрузке страницы я устанавливаю сортировку по умолчанию по дате, однако есть еще два столбца, которые можно щелкнуть и отсортировать. Он работает, но только на странице, на которую он просматривается в данный момент, не просачивается на другие страницы. Здесь моя функция сортировки и функция подкачки. Цените любую помощь!

    $scope.sortBy = function(keyName){
        if($scope.sortType === keyName){
            $scope.sortReverse = !$scope.sortReverse;
        } else{
            $scope.sortReverse = false;
        }
        $scope.sortType = keyName;
        console.log('Type', $scope.sortType, 'Reverse', $scope.sortReverse);
    };

    function setPage(page) {
        if (page < 1 || page > vm.pager.totalPages) {
            return;
        }

        // get pager object from service
        vm.pager = PagerService.GetPager(vm.uploads.length, page);

        // get current page of items
        vm.uploads.sort(function(a,b){
            return new Date(b.uploadDate).getTime()- new Date(a.uploadDate).getTime();
        })

        vm.items = vm.uploads.slice(vm.pager.startIndex, vm.pager.endIndex + 1);
    }

Вот код таблицы html:

                <div>
                    <table class="table">
                        <tr>
                            <th ng-click="sortBy('uploadDate')" >Upload Date
                                <span ng-show="sortType == 'uploadDate' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'uploadDate' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Product</th>
                            <th>Comments</th>
                            <th ng-click="sortBy('templateName')">Template
                                <span ng-show="sortType == 'templateName' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'templateName' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Last Updated By</th>
                            <th>Last Updated</th>
                            <th ng-click="sortBy(statusName)">Status
                                <span ng-show="sortType == 'statusName' && sortReverse" class="fa fa-caret-down"></span>
                                <span ng-show="sortType == 'statusName' && !sortReverse" class="fa fa-caret-up"></span>
                            </th>
                            <th>Actions</th>
                        </tr>
                        <tr ng-repeat="upload in vm.items | orderBy:sortType:sortReverse">
                            <td style="white-space: nowrap;">{{upload.uploadDate}}</td>
                            <td>{{upload.product}}</td>
                            <td style="white-space: nowrap;">{{upload.comments}}</td>
                            <td style="white-space: nowrap;">{{upload.templateName}}</td>
                            <td style="white-space: nowrap;">{{upload.lastUpdatedByUser}}</td>
                            <td style="white-space: nowrap;">{{upload.lastUpdateDate}}</td>
                            <td style="white-space: nowrap;">{{upload.status.statusName}}</td>
                            <td>
                                <button class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " ng-hide="upload.status.statusCd === 'NEW' || upload.status.statusCd === 'ERROR'" ng-click="vm.loadStagingPage(upload.dataLoadExecutionId, upload.product, upload.status)">View</button>
                                <span class="btn btn-primary btn-xs pull-left" style="margin-bottom: 5px; " type="button" ng-click="vm.cancelDataExecution(upload.dataLoadExecutionId)" ng-show="upload.inProgress || upload.status.statusCd === 'ERROR'">Remove</span>
                            </td>
                        </tr>
                    </table>
                <div class="text-center">
                   <ul ng-if="vm.pager.pages.length" class="pagination">
                        <li ng-class="{disabled:vm.pager.currentPage === 1}">
                            <a ng-click="vm.setPage(1)">First</a>
                        </li>
                        <li ng-class="{disabled:vm.pager.currentPage === 1}">
                            <a ng-click="vm.setPage(vm.pager.currentPage - 1)">Previous</a>
                        </li>
                        <li ng-repeat="page in vm.pager.pages" ng-class="{active:vm.pager.currentPage === page}">
                            <a ng-click="vm.setPage(page)">{{page}}</a>
                        </li>               
                        <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                            <a ng-click="vm.setPage(vm.pager.currentPage + 1)">Next</a>
                        </li>
                        <li ng-class="{disabled:vm.pager.currentPage === vm.pager.totalPages}">
                            <a ng-click="vm.setPage(vm.pager.totalPages)">Last</a>
                        </li>
                    </ul>
                </div>
                </div>