Angular: Empty Fiddle

http://angularjs.org/

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: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: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: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>

CSS

.left {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 20%;
}

.right {
  display: inline;
  float: left;
  margin-left: 10px;
  margin-right: 10px;
  width: 60%;
}

.top {
  border-bottom: thick solid rgb(11, 112, 178);
}

.left {
  margin: 5px;
  border-right: thin solid gray;
}

.filter {
  margin: 10px;
  border-bottom: thin solid rgb(218, 218, 218);
}

JavaScript

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

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;
};

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,
    ...