Angular checkbox select all or unselect

by Ankit Patidar

HTML

<script src="https://code.angularjs.org/1.3.6/angular.js"></script>
<div ng-app="ap">
  <div ng-controller="MainCtrl">
  
    <div>
      <label><input type="checkbox" ng-model="select.all" ng-click="selectFx('all')">
        <span ng-show="select.all">All Selected</span>
        <span ng-hide="select.all">Select All</span>
      </label>
    </div>
    
    <div ng-repeat="list in checkboxes">
      <label>
        <input type="checkbox" ng-model="list.select" ng-click="selectFx()"> {{list.label}}
      </label>
    </div>

    <hr>

    <pre>{{checkboxes}}</pre>
    
  </div>
</div>

JavaScript

var app = angular.module('ap', []);
app.controller('MainCtrl', function($scope){
  $scope.allSelected = false;
  $scope.checkboxes = [
  	{label: 'Option 1', select: true},
    {label: 'Option 2'},
    {label: 'Option 3'},
    {label: 'Option 4', select: true},
    {label: 'Option 5'}
  ];

  $scope.select = {all:false};
  $scope.selectFx = function(caller){
    if(caller == "all"){
      var toggleStatus = $scope.select.all;
      angular.forEach($scope.checkboxes, function(list){
        list.select = toggleStatus;
      });
    } else{
      $scope.select.all = $scope.checkboxes.every(function(list){
        return list.select;
      });
    }
  }

});