var myapp = angular.module('sampleapp', [ ]); myapp.controller('samplecontoller', function ($scope) { $scope.labelList = [ {name:'India'}, {name:'USA'}, {name:'Russia'}, {name:'China'}, {name:'Australia'}, {name:'Japan'} ] $scope.model = { selectedLabelList : [] } $scope.isSelectAll = function(){ $scope.model.selectedLabelList = []; if($scope.master){ $scope.master = true; for(var i=0;i<$scope.labelList.length;i++){ $scope.model.selectedLabelList.push($scope.labelList[i].name); } } else{$scope.master = false;} angular.forEach($scope.labelList, function (item) { item.selected = $scope.master; }); } $scope.isLabelChecked = function() { var _name = this.label.name; if(this.label.selected){ $scope.model.selectedLabelList.push(_name); if($scope.model.selectedLabelList.length == $scope.labelList.length ){$scope.master = true;} }else{ $scope.master = false; var index = $scope.model.selectedLabelList.indexOf(_name); $scope.model.selectedLabelList.splice(index, 1); } } });
<div ng-app="sampleapp" ng-controller="samplecontoller"> <input type="checkbox" ng-model="master" ng-change="isSelectAll()"><label>Countries</label><br> <span ng-repeat="label in labelList"> <input type="checkbox" ng-model="label.selected" ng-change="isLabelChecked()"> <label>{{ label.name }}</label> </span> </div>