Angular: Empty Fiddle

http://angularjs.org/

by Jack Andy

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>
      <div class="filter">
    Location
    <div>
        <div ng-repeat="locations in locationGroup">
            <b><input type="checkbox" ng-model="useLocation[location]"/>{{locations}}</b>
            <span>({{ (filteredPlayers | filter:query | filter:count('location', locations)).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}}
                <span>
                   <span ng-repeat="loc in...

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 = [];
        
    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.useLocation = {};
        
    $scope.players = [
        {name: 'Bruce Wayne', shirt: 'XXL', pants: '42', shoes: '12',
         instances:{
         instance:[
         {cname:'name1', location:'pa', price:40, model:'2014' },     
         {cname:'name1', location:'ga', price:30 , model:'2014'},
         {cname:'name1', location:'ga', price:20, model:'2010' }        
        ]}
        },
        {name: 'Wayne Gretzky', shirt: 'XL', pants: '38', shoes: '10',
        instances:{
         instance:[
         {cname:'name1', location:'ca', price:40, model:'2014' },     
         {cname:'name1', location:'ga', price:30 , model:'2014'}       
        ]}
        },        
        {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:...