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="right" style="border-right:1px">
    <div>
        <ul>
        <li ng-repeat="player in filteredPlayers | filter:query" >
            <p><b>Player: {{player.name}}</b></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 = [];
    
    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;
            };
       ...