title: Angular: How to uncheck all checkboxes with a link?
body: <p>Here's my fiddle: <a href="http://jsfiddle.net/VSph2/280/" rel="nofollow noreferrer">http://jsfiddle.net/VSph2/280/</a></p>
  
  <p>I'm trying to uncheck a <code>checkbox</code> and reset the values of a scope variable with a link, however, it doesn't seem to work. Could someone help?</p>
  
  <p>Javascript:</p>
  
  <pre><code>var app = angular.module('myApp', []);
  
  app.controller('IndexCtrl', ['$scope', function($scope) {
  
    $scope.colors = [
      {id: 1, name: "Blue"},
      {id: 2, name: "Green"},
      {id: 3, name: "Red"}
    ];
    $scope.color_ids = [];
  
    $scope.clearAll = function() {
      angular.forEach($scope.color_ids, function(color_id) {
        color_id.checked = false; //nothing works!!
        color_id.selected = false; //
      });
      $scope.color_ids = [];
      $scope.color_ids.selected = false; //doesn't work either
    };
  
  }]);
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div ng-controller="IndexCtrl"&gt;{{1+1}}
  &lt;h2&gt;Products&lt;/h2&gt;
    &lt;div class="filters col-two"&gt;
      &lt;a ng-click="clearAll()"&gt;Clear all filters&lt;/a&gt;
      &lt;h3&gt;Color&lt;/h3&gt;
      &lt;div ng-repeat="color in colors"&gt;
        {{ color.name }} &lt;input type="checkbox" ng-model="color_ids"&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>