title: AngularJS checkbox filter
body: <p>I would like to filter the results.</p>
  
  <p>There is a list of wines, my wish is when no checkbox is checked, the entire list of wine is displayed.</p>
  
  <ul>
  <li>when only 1 checkbox is checked is displayed the related category</li>
  <li>when more than one checkbox are checked the related categories are displayed</li>
  </ul>
  
  <p>I'm a newbie to AngularJS, I tried with ng-model wihout success, here is the code without ng-model associated to the function:</p>
  
  <pre><code>&lt;html ng-app="exampleApp"&gt;
  &lt;head&gt;
      &lt;title&gt;&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.10/angular.min.js"&gt;&lt;/script&gt;
  
      &lt;script&gt;
          angular.module("exampleApp", [])
                  .controller("defaultCtrl", function ($scope) {
                      $scope.wines = [
                          { name: "Wine A", category: "red" },
                          { name: "Wine B", category: "red" },
                          { name: "wine C", category: "white" },
                          { name: "Wine D", category: "red" },
                          { name: "Wine E", category: "red" },
                          { name: "wine F", category: "white" },
                          { name: "wine G", category: "champagne"},
                          { name: "wine H", category: "champagne" }
  
                      ];
  
  
                      $scope.selectItems = function (item) {
                          return item.category == "red";
                      };
  
                      $scope.selectItems = function (item) {
                          return item.category == "white";
                      };
  
                      $scope.selectItems = function (item) {
                          return item.category == "champagne";
                      };
                  });
      &lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="defaultCtrl"&gt;
  
  &lt;h4&gt;red: &lt;input type="checkbox"&gt;&lt;/h4&gt;
  &lt;h4&gt;white: &lt;input type="checkbox"&gt;&lt;/h4&gt;
  &lt;h4&gt;champagne: &lt;input type="checkbox"&gt;&lt;/h4&gt;
  
  
  
              &lt;div ng-repeat="w in wines | filter:selectItems"&gt;
                  {{w.name}}
                  {{w.category}}
              &lt;/div&gt;
  
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>How to use ng-model or ng-change to associate a function to each checkbox button to have a real time filtering model??</p>