title: Filter Array Using Checkboxes with AngularJS
body: <p>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. </p>
  
  <p>I know i have the data array in a repeater, and then the filtering inputs in an element outside of the data array element (two different divs), could this be what's causing the disconnect? Because i notice when i add the checkbox to the repeater element i do get some form of feedback array when i click the checkbox.</p>
  
  <p>Binding a search input box was so easy to implement, however i'm spending way too much time getting this simple checkbox to filter the data.</p>
  
  <p>So im now reaching out to the Angular community for a little help on filtering with checkboxes as the documentation does not cover this topic very well. </p>
  
  <p>Here is the fiddle: <a href="http://jsfiddle.net/rzgWr/1/">http://jsfiddle.net/rzgWr/1/</a></p>
  
  <pre><code>&lt;div ng-controller="MyCtrl"&gt;
  &lt;div&gt;
  &lt;div ng-repeat="pants in players | groupBy:'pants'"&gt;
      &lt;b&gt;&lt;input type="checkbox" ng-model="query"/&gt;{{pants}}&lt;/b&gt;
      &lt;span&gt;({{(players | filter:pants).length}})&lt;/span&gt;
  &lt;/div&gt;
  
  &lt;div&gt;
      &lt;ul&gt;
      &lt;li ng-repeat="player in players | filter:query"&gt;
          &lt;p&gt;&lt;b&gt;{{player.name}}&lt;/b&gt;&lt;/p&gt;
          &lt;p&gt;{{player.shirt}} {{player.pants}}, {{player.shoes}}&lt;/p&gt;
      &lt;/li&gt;
      &lt;/ul&gt;    
  &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>function MyCtrl($scope, filterFilter) {
  $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: 'Player Two', shirt: 'XXL', pants: '42', shoes: '12'}
  ]; 
  
  $scope.$watch('filtered', function (newValue) {
      if (angular.isArray(newValue)) {
          console.log(newValue.length);
      }
  }, true);    
  </code></pre>
  
  <p>}</p>
  
  <p>Any and all help/advice is sincerely appreciated.</p>
  
  <p>Thanks.</p>