Online Snippets Library

Select and Deselect All Checkboxes using AngularJS

To Select and Deselect all Checkboxes, we will use ng-click,ng-repeat directive of AngularJS.

Example

HTML
<!DOCTYPE html>
<html>
<head>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.1/angular.min.js"></script>
</head>
<body>
  <div ng-app="checkboxApp" ng-controller="mycheckboxController">
     <div>
    <ul ng-controller="mycheckboxController">
       <li>Check All
    <input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" />
       </li>
        <li ng-repeat="item in Items">
           <label>{{item.Name}}
              <input type="checkbox" ng-model="item.Selected" />
               </label>
           </li>
       </ul>
   </div>
   </div>
</body>
</html>
JavaScript
   angular.module("checkboxApp", [])
    .controller("mycheckboxController", function checkboxController($scope) {
   $scope.Items = [{
        Name: "First Checkbox"
    }, {
        Name: "Second Checkbox"
    }, {
        Name: "Third Checkbox"
    }];
    $scope.checkAll = function () {
     if ($scope.selectedAll) {
          $scope.selectedAll = true;
        } else {
            $scope.selectedAll = false;
        }
        angular.forEach($scope.Items, function (item) {
            item.Selected = $scope.selectedAll;
        });

    };


});