title: Angular: Showing only checked items in a checkbox list
body: <p>Is it possible to show only a list of checked items in a checkbox list?  </p>
  
  <p>What I want to do is select a few items on a checked list and when I press "Show only checked items", I want to toggle between showing <strong>only</strong> the checked items in the checkbox list and showing the entire list with the checked items.</p>
  
  <p>I searched angular's site but wasn't able to find a solution to it.</p>
  
  <p>Fiddle: <a href="http://jsfiddle.net/fjoLy5sq/422/" rel="nofollow noreferrer">http://jsfiddle.net/fjoLy5sq/422/</a></p>
  
  <pre><code>&lt;div ng-controller="DemoCtrl"&gt;
    &lt;label ng-repeat="role in roles"&gt;
      &lt;input type="checkbox" checklist-model="user.roles" checklist-value="role.id"&gt; {{role.text}}
    &lt;/label&gt;
    &lt;br&gt;
    &lt;button ng-click="checkAll()"&gt;check all&lt;/button&gt;
    &lt;button ng-click="uncheckAll()"&gt;uncheck all&lt;/button&gt;
    &lt;button ng-click="checkFirst()"&gt;check first&lt;/button&gt;
     &lt;button ng-click="checkFirst()"&gt;Show only Checked&lt;/button&gt;
    &lt;br&gt;&lt;br&gt;
    user.roles {{ user.roles | json }}
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript: </p>
  
  <pre><code>angular.module("DemoApp", ["checklist-model"])
  .controller('DemoCtrl', function($scope) {
  $scope.roles = [
      {id: 1, text: 'guest'},
      {id: 2, text: 'user'},
      {id: 3, text: 'customer'},
      {id: 4, text: 'admin'}
    ];
    $scope.user = {
      roles: [2, 4]
    };
    $scope.checkAll = function() {
      $scope.user.roles = $scope.roles.map(function(item) { return item.id; });
    };
    $scope.uncheckAll = function() {
      $scope.user.roles = [];
    };
    $scope.checkFirst = function() {
      $scope.user.roles.splice(0, $scope.user.roles.length); 
      $scope.user.roles.push(1);
    };
  
  });
  </code></pre>