Filter Array Using Checkboxes with AngularJS

Question

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

Answer 1

EDIT 2

Per all the requests of the OP, here is the final state.

http://jsfiddle.net/rzgWr/19/

---

EDIT (OP added a bounty)

Per your bounty, is this what you wanted?

http://jsfiddle.net/rzgWr/17/

---

Is this what you wanted?

http://jsfiddle.net/rzgWr/12/

Template

    

      

          Search: 
       
    

        

            {{pants}}
            ({{(players | filter:pants).length}})
        
    

    

        

        

            
{{player.name}}
            
{{player.shirt}} {{player.pants}}, {{player.shoes}}
        
        
    
    
    

Script

var myApp = angular.module('myApp',[]);

function MyCtrl($scope, filterFilter) {
    $scope.usePants = [];

    $scope.filterPants = function () {
        return function (p) {
            for (var i in $scope.usePants) {
                return (p.pants == $scope.pantsGroup[i] && $scope.usePants[i]);
            }
        };
    };

    $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: 'Rodman', shirt: 'XXL', pants: '42', shoes: '11'},
        {name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Will Will', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Youasdf Oukls', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Sam Sneed', shirt: 'XL', pants: '38', shoes: '10'},
        {name: 'Bill Waxy', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Javier Xavior', shirt: 'M', pants: '32', shoes: '9'},
        {name: 'Bill Knight', shirt: 'M', pants: '32', shoes: '9'},        
        {name: 'One More', shirt: 'M', pants: '32', shoes: '9'},        
        {name: 'Player One', shirt: 'XXL', pants: '42', shoes: '11'},
        {name: 'Space Cadet', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Player Two', shirt: 'XXL', pants: '42', shoes: '12'}
    ]; 

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

myApp.filter('count', function() {
    return function(collection, key) {
      var out = "test";
      for (var i = 0; i < collection.length; i++) {
          //console.log(collection[i].pants);
          //var out = myApp.filter('filter')(collection[i].pants, "42", true);
      }
      return out;
    }
});

var uniqueItems = function (data, key) {
    var result = new Array();
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];

        if (result.indexOf(value) == -1) {
            result.push(value);
        }

    }
    return result;
};

myApp.filter('groupBy',
            function () {
                return function (collection, key) {
                    if (collection === null) return;
                    return uniqueItems(collection, key);
        };
    });