Filter Array Using Checkboxes with AngularJS

I have the following code where i'm trying to filter on the players in the array by checking a checkbox for the pantsize of a player.

I know i have the data array in a repeater, and then the filtering inputs in an element outside of the data array element (two different divs), could this be what's causing the disconnect? Because i notice when i add the checkbox to the repeater element i do get some form of feedback array when i click the checkbox.

Binding a search input box was so easy to implement, however i'm spending way too much time getting this simple checkbox to filter the data.

So im now reaching out to the Angular community for a little help on filtering with checkboxes as the documentation does not cover this topic very well.

Here is the fiddle: 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);    

}

Any and all help/advice is sincerely appreciated.

Thanks.