угловой результат и нумерация страниц не обновляются в фильтре

У меня есть это угловое приложение, где я отображаю таблицу на основе записей с фильтрами, но проблема в том, что когда я ввожу значение в фильтр, записи получают фильтр, но после удаления значения фильтра оно не обновляется, а также разбиение на страницы сохраняется, когда мы нажимаем следующие числа, продолжаем уменьшать, я новичок в angularjs, любая помощь будет очень признательна.

Это мой HTML-код:

<input type="search" placeholder="Search By Any..." ng-model="search.$" />
table-striped table-bordered">
<thead>
    <tr>
        <th><a href="#" ng-click="changeSort('name')">User</a></th>
        <th><a href="#" ng-click="changeSort('contentType')">Content Type</a></th>
        <th><a href="#" ng-click="changeSort('contentName')">Content Name</a></th>
        <th><a href="#" ng-click="changeSort('startTime')">Start Time</a></th>
        <th><a href="#" ng-click="changeSort('endTime')">End Time</a></th>
        <th><a href="#" ng-click="changeSort('duration')">Duration(In Secs)</a></th>
    </tr>
</thead>
<tbody>
    <tr ng-repeat="record in filteredRecords 
        | filter: search 
        | offset: currentPage*itemsPerPage 
        | limitTo: itemsPerPage 
        | 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>
<tfoot>
    <td colspan="6">
        <div class="pagination pull-left">
            <ul>
                <li ng-class="prevPageDisabled()"><a href
                    ng-click="prevPage()">« Prev</a></li>
                <li ng-repeat="n in range()"
                    ng-class="{active: n == currentPage}" ng-click="setPage(n)">
                    <a href="#">{{n+1}}</a>
                </li>
                <li ng-class="nextPageDisabled()"><a href
                    ng-click="nextPage()">Next »</a></li>
            </ul>
        </div>
    </td>
</tfoot>

This is angular code:

angular.module("contentViewStatusApp")
.controller("contentViewStatusController", function($scope,
 $filter,contentViewStatusService)
{
var records = contentViewStatusService.list();

$scope.changeSort = function(value)
{
    if ($scope.sort == value)
    {
        $scope.reverse = !$scope.reverse;
        return;
    }
    $scope.sort = value;
    $scope.reverse = false;
}

$scope.itemsPerPage = 8;
$scope.currentPage = 0;
$scope.filteredRecords = [];
$scope.items = [];

$scope.range = function()
{
    var rangeSize = 5;
    var ret = [];
    var start;

    start = $scope.currentPage;
    if (start > $scope.pageCount() - rangeSize && $scope.pageCount() > rangeSize)
    {
        start = $scope.pageCount() - rangeSize + 1;
    }

    if($scope.pageCount() > rangeSize)
        for (var i = start; i < start + rangeSize; i++)
        {
            ret.push(i);
        }
    else
        for (var i = start; i < $scope.pageCount()+1; i++)
        {
            ret.push(i);
        }
    return ret;
};

var filterBy = $filter('filter');
$scope.$watch('search', function(newValue)
{
    $scope.filteredRecords = filterBy(records, newValue);
}, true);


$scope.prevPage = function()
{
    if ($scope.currentPage > 0)
    {
        $scope.currentPage--;
    }
};

$scope.prevPageDisabled = function()
{
    return $scope.currentPage === 0 ? "disabled" : "";
};

$scope.pageCount = function()
{
    return Math.ceil($scope.filteredRecords.length / $scope.itemsPerPage) - 1;
};

$scope.nextPage = function()
{
    if ($scope.currentPage < $scope.pageCount())
    {
        $scope.currentPage++;
    }
};

$scope.nextPageDisabled = function()
{
    return $scope.currentPage === $scope.pageCount() ? "disabled" : "";
};

$scope.setPage = function(n)
{
    $scope.currentPage = n;
};
});