Select All Checkbox In Angularjs

I have a select all checkbox and list check-box like this. A checkbox list receive data from $scope.contacts = [ {'name': 'Bambizo', 'check': false}, {'name': 'Jim

Solution 1:

ng-model="checkAllContact" & method checkAllContact has same name.

checkAllContact scope variable is overriding by checkAllContact.

You need to change your function name will fix the issue.

Solution 2:

Your function name and variable name(ng-model) both are same, change one of them.

Also you can do it in a much simpler way, for an eg.

HTML:

 <inputtype="checkbox" ng-model="checkAllContact1" ng-change="checkAllContact()">
 <div ng-repeat="item in contacts">
     <inputtype="checkbox" ng-model="item.check"/>
 </div>

JS:

$scope.checkAllContact = function(){
    if ($scope.checkAllContact1) {
        $scope.checkAllContact1 = true;
    } else {
        $scope.checkAllContact1 = false;
    }
    angular.forEach($scope.contacts, function (item) {
        item.check = $scope.checkAllContact1;
    });
}

See the example Fiddle