Angular Checkboxes “Select All” functionality with only one box selected initially

Question

I have a form that contains 3 checkboxes: \"Select All\", \"Option 1\", and \"Option 2\".

Answer 1

I like to use an ng-repeat for clarity on showing what you're selecting/un-selecting, basically you end up with a nice little object to base it all on, and adding to it is just easier.

Here's a Plunker

*Also notice how you can achieve allSelected? with a loop func and not a ton of html, and I'm sure this can be done with less spaghetti but it works *

app.controller('MainCtrl', function($scope) {

$scope.allSelected = false;

$scope.checkboxes = [{label: 'Option 1',checked: true}, {label: 'Option 2'}}}];

$scope.cbChecked = function(){
  $scope.allSelected = true;
  angular.forEach($scope.checkboxes, function(v, k) {
    if(!v.checked){
      $scope.allSelected = false;
    }
  });
}
$scope.toggleAll = function() {
    var bool = true;
    if ($scope.allSelected) {
      bool = false;
    }
    angular.forEach($scope.checkboxes, function(v, k) {
      v.checked = !bool;
      $scope.allSelected = !bool;
      });
   }
});