Не работает два способа фильтрации (AngularJS)

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

<body ng-controller="MainController">
    <ul search-list=".letter" model="search">
        <li class="letter" ng-repeat="letter in alphabet.letter">{{ letter }}</li>
    </ul>

    <div class="container" ng-controller="CountriesController">

        <input id="q" type="text" ng-model="search " />
        <ul>
            <li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
        </ul>

    </div>
</body>

И js: 

var app = angular.module('demo', []);
var controllers = {};
var alphabet = "abcdefghijklmnopqrstuvwxyz".split("");



app.directive('searchList', function() {
    return {
        scope: {
            searchModel: '=model'
        },
        link: function(scope, element, attrs) {
            element.on('click', attrs.searchList, function() {
                scope.searchModel = $(this).text();
                scope.$apply();
            });
        }
    };
});

controllers.MainController = function($scope) {
    $scope.setTerm = function(letter) {
        $scope.search = letter;
    };
    $scope.alphabet = {
      letter: alphabet
    }
};
controllers.CountriesController = function($scope){

  $scope.countries = {
    country:['Ukraine','Urugvai','Russia','Romania','Rome','Argentina','Britain']
  }
  $scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }
};



app.controller(controllers);

На первый взгляд все работает нормально, но это так только на первый взгляд...

Когда я сначала нажимаю на любую букву-фильтр работает хорошо. Когда затем я печатаю в поле ввода-фильтр работает хорошо. Но после того, как я ввел в поле ввода или удалил оттуда текст с помощью кнопки "backspace" - фильтр, нажав на Буквы, перестает работать...

Почему это работает так, и как я могу исправить эту проблему? Вот мое демо

Thanx заранее!

2 5
javascript angularjs jquery filtering

2 ответа:

Проблема заключается в использовании двух контроллеров. если удалить CountriesController, то все работает хорошо.

Значения Search были перепутаны с тем, какой контроллер использует этот объект scope.я думаю, что вам не нужно реализовывать два контроллера для этого сценария

Смотрите рабочую демонстрацию , Если вы удалите CountriesController.

2

Измените эту часть html на эту она прекрасно работает (ng-model= " $parent.поиск ") 

   <div class="container" ng-controller="CountriesController">

        <input id="q" type="text" ng-model="$parent.search " />
        <ul>
            <li ng-repeat="country in countries.country | filter:search:startsWith">{{ country }}</li>
        </ul>

    </div>
1