Фильтрация списка не работает в AngularJS при привязке к слайдеру с нумерацией страниц

Question

У меня есть сайт ASP.NET MVC с AngularJS в представлениях, и мне нужно выполнить фильтрацию списка на основе определенных элементов управления, использующих AngularJS. Вот элементы управления:

• Входное текстовое поле, действующее как поиск, но служит угловой моделью для списка. В настоящее время список в формате, но я планирую изменить его на divs.

• Список (на данный момент, как это будет делиться позже), связанный с полем ввода ввода (модель ng), но также отфильтрованный для обработки нумерации страниц на основе поля поиска.

• Элемент управления Angular Bootstrap UI Pagination, управляющий разбиением на страницы для окна поиска, а также для ползунка.

• Пользовательский ползунок Angular, который должен (поскольку это сейчас проблема), который должен фильтровать список на основе компонента цены.

В настоящее время список подается через вызов http ajax из Angular, который заполняет список объектов JSON со многими свойствами. В настоящее время список фильтруется из поля поиска ввода через свойство Location объекта JSON (хотя он автоматически делает это при вводе текста, он находит свойство location и фильтрует его - я озадачен тем, как, поскольку я новичок в AngularJS, потому что я явно не сказал ему фильтровать свойство Location).

Проблема в том, что мне также хотелось бы отфильтровать список на основе свойства Price объекта JSON. В своем коде я попытался сделать это с помощью пользовательских фильтров и часов, но, похоже, ничего из этого не работает. Я также хочу, чтобы нумерация страниц обновлялась, так как список сужается, как и для поля поиска ввода.

Таким образом, список должен фильтроваться полем поиска ввода, а также ползунком (и, возможно, флажками или раскрывающимися списками, если я планирую обновить его позже, но пока список фильтруется только ползунком цены и полем поиска ввода).

Вот мой код:

HTML

<div data-ng-app="dealsPage">
<input type="text" data-ng-model="cityName" />
<div data-ng-controller="DestinationController">
    <ul>
        <li data-ng-repeat="deals in destinations | startFrom:(currentPage - 1)*pageSize | limitTo:pageSize | priceSorter:curLow:curHigh">{{deals.Location}} -- {{deals.Price}}</li>
    </ul>
    <br />
    <pagination rotate="true" num-pages="noOfPages" current-page="currentPage" max-size="maxSize" class="pagination-small" boundary-links="true"></pagination>
    <br />
    <slider min="{{min}}" max="{{max}}" low="curLow" high="curHigh" round="2" step="0.25" translate="translate(val)"></slider>
    <br />
    Value: {{curLow}} -- {{curHigh}}
    <br />
    Range: {{range}}
</div>

AngularJS

var destApp = angular.module('dealsPage', ['ui.bootstrap']);
var sliderDirective;

destApp.controller('DestinationController', function ($scope, $http, $filter) {
        $scope.destinations = {};
    $scope.filteredDestinations = {};

    $scope.min = 300;
    $scope.max = 1000;
    $scope.curLow = 320;
    $scope.curHigh = 980;
    $scope.translate = function (val) { return val + "° C"; };
    $scope.range = 0;

    $http.get('/Deals/GetDeals').success(function (data) {
        $scope.destinations = data;
    });

    $scope.pageSize = 10;
    $scope.maxSize = 5;

    //Watch for pagination based on the input search box.
    $scope.$watch('cityName', function (newCityName) {
        $scope.currentPage = 1;
        $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.cityName);
        $scope.noOfPages = isNaN($scope.filteredDestinations.length / 10) ? 200 : $scope.filteredDestinations.length / 10;
    });

    //These two watches are for the slider controls to observe pagination, but should I use the list filtereing logic in here and how?
    $scope.$watch('curLow', function (newValue) {
        $scope.range = Math.round($scope.curHigh - newValue);                
        $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.range);
        $scope.noOfPages = isNaN($scope.filteredDestinations.length / 10) ? 200 : $scope.filteredDestinations.length / 10;
    });

    $scope.$watch('curHigh', function (newValue) {
        $scope.range = Math.round(newValue - $scope.curLow);
        $scope.filteredDestinations = $filter('filter')($scope.destinations, $scope.range);
        $scope.noOfPages = isNaN($scope.filteredDestinations.length / 10) ? 200 : $scope.filteredDestinations.length / 10;
    });});

    destApp.directive('slider', function ($timeout, $compile)....//Code for slider here);

    destApp.filter('startFrom', function () {
    return function (input, start) {
        start = +start; //parse to int
        return input.slice(start);
    };
});

destApp.filter('priceSorter', function () {
    var filteredInput = new Array();
    return function (input, curLow, curHigh) {
        for (var x = 0; x <= input.length; x++) {
            if ((input[x].Price > curLow) && (input[x].Price < curHigh)) {
                filteredInput.push(input[x]);
            }
        }

        //This should work as I can see the filtering taking place, but the list does not get rendered on the view!
        return filteredInput;
    };}); 

Я думал о том, чтобы сделать слайдер моделью ng, потому что я хочу, чтобы он фильтровал список ul по свойству Price, но я не знаю, как сделать слайдер моделью ng.

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

Спасибо большое,

Бен.