Angular: Empty Fiddle

http://angularjs.org/

by bullrout

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<div ng-controller="MyCtrl">
    <div>
      <div class="top">
          Search: <input name="company" type="text" class="search-input" ng-model="query"/>
      </div>
        
<section class="left" style="border-right:1px">  
    <div class="filter">
    Pant Size
    <div>
        <div ng-repeat="pants in pantsGroup">
            <b><input type="checkbox" ng-model="usePants[pants]"/>{{pants}}</b>
            <span>({{ (filteredPlayers | filter:query | filter:count('pants', pants)).length }})</span>
        </div>
    </div>
    </div>
    
    <div class="filter">
    Shirt Size
    <div>
        <div ng-repeat="shirts in shirtsGroup">
            <b><input type="checkbox" ng-model="useShirts[shirts]"/>{{shirts}}</b>
            <span>({{ (filteredPlayers | filter:query | filter:count('shirt', shirts)).length }})</span>
        </div>
    </div>
    </div>

    <div class="filter">
    Shoe Size
    <div>
        <div ng-repeat="shoes in shoesGroup">
            <b><input type="checkbox" ng-model="useShoes[shoes]"/>{{shoes}}</b>
            <span>({{ (filteredPlayers | filter:query | filter:count('shoes', shoes)).length }})</span>
        </div>
    </div>
    </div>
</section>        
<section class="right" style="border-right:1px">
    <div>
        <ul>
        <li ng-repeat="player in filteredPlayers | filter:query" >
            <p><b>Player: {{player.name}}</b></p>
            <p>Shirt Size: {{player.shirt}} Pant Size: {{player.pants}} Shoe Size: {{player.shoes}}</p>
        </li>
        </ul>    
    </div>
    </div>
</section>
</div>

JavaScript

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

var uniqueItems = function (data, key) {
    var result = [];
    
    for (var i = 0; i < data.length; i++) {
        var value = data[i][key];
 
        if (result.indexOf(value) == -1) {
            result.push(value);
        }
    
    }
    return result;
};

function MyCtrl($scope, filterFilter) {
    $scope.usePants = {};
    $scope.useShirts = {};
    $scope.useShoes = {};
        
    $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: 'XSXL', pants: '42', shoes: '11'},
        {name: 'Jake Smitz', shirt: 'XXL', pants: '42', shoes: '12'},
        {name: 'Will Will', shirt: 'XXLL', 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: 'XXXXL', pants: '42', shoes: '12'}
    ]; 
    
    // Watch the pants that are selected
    $scope.$watch(function () {
        return {
            players: $scope.players,
            usePants: $scope.usePants,
            useShirts: $scope.useShirts,
            useShoes: $scope.useShoes
        }
    }, function (value) {
        var selected;
        
        $scope.count = function (prop, value) {
            return function (el) {
                return el[prop] == value;
            };
        };
     ...