Matriz de filtro usando caixas de seleção com AngularJS

Eu tenho o código a seguir onde estou tentando filtrar os jogadores da matriz, marcando uma caixa de seleção para o tamanho da calça de um jogador.

Eu sei que tenho a matriz de dados em um repetidor e, em seguida, as entradas de filtragem em um elemento fora do elemento da matriz de dados (duas divs diferentes), isso pode estar causando a desconexão? Porque eu aviso quando adiciono a caixa de seleção ao elemento repetidor, recebo algum tipo de matriz de feedback quando clico na caixa de seleção.

Vincular uma caixa de entrada de pesquisa foi tão fácil de implementar, no entanto, estou gastando muito tempo recebendo essa caixa de seleção simples para filtrar os dados.

Então, agora estou entrando em contato com a comunidade Angular para obter uma pequena ajuda na filtragem de caixas de seleção, pois a documentação não cobre muito bem esse tópico.

Aqui está o violino: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);    

}

Toda e qualquer ajuda / conselho é sinceramente apreciada.

Obrigado.