Html – Angular: How to uncheck all checkboxes with a link


Here's my fiddle:

I'm trying to uncheck a checkbox and reset the values of a scope variable with a link, however, it doesn't seem to work. Could someone help?


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



<div ng-controller="IndexCtrl">{{1+1}}
  <div class="filters col-two">
    <a ng-click="clearAll()">Clear all filters</a>
    <div ng-repeat="color in colors">
      {{ }} <input type="checkbox" ng-model="color_ids">

Best Solution

You never add anything to the color_id array, so the foreach is not iterating over anything.

I updated your code to just use the main color array and add a selected property on it:


{{ }} <input type="checkbox" ng-model="color.selected">


angular.forEach($scope.colors, function(color_id) {        
    color_id.selected = false;