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

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

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

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

Вот скрипка:http://jsfiddle.net/rzgWr/1/

<div ng-controller="MyCtrl">
<div>
<div ng-repeat="pants in players | groupBy:'pants'">
    <b><input type="checkbox" ng-model="query"/>{{pants}}</b>
    <span>({{(players | filter:pants).length}})</span>
</div>

<div>
    <ul>
    <li ng-repeat="player in players | filter:query">
        <p><b>{{player.name}}</b></p>
        <p>{{player.shirt}} {{player.pants}}, {{player.shoes}}</p>
    </li>
    </ul>    
</div>
</div>

function MyCtrl($scope, filterFilter) {
$scope.players = [
    {name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12'},
    {name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10'},
    {name: 'Michael Jordan', shirt: 'M', pants: '32', shoes: '9'},
    {name: 'Player Two', shirt: 'XXL', pants: '42', shoes: '12'}
]; 

$scope.$watch('filtered', function (newValue) {
    if (angular.isArray(newValue)) {
        console.log(newValue.length);
    }
}, true);    

}

Любая помощь и совет искренне приветствуются.

Благодарю.