Check out my Plnkr with nested loops of checkboxes: here
Below is the HTML code for the nested loops of checkboxes:
<ul>
<li ng-repeat="continent in destinations">
<input type="checkbox" ng-model="continent.selected">
{{continent.name}} ({{continent.countries_selected}} / {{continent.countries.length}}) - {{continent.all_selected}}
<ul>
<li ng-repeat="country in continent.countries">
<input type="checkbox" ng-model="country.selected" ng-checked="continent.selected">
{{country.name}}
</li>
</ul>
</li>
</ul>
The provided JavaScript code watches for checked children checkboxes to update the parent checkbox accordingly.
However, there seems to be an issue where checking the parent checkbox does not affect its children checkboxes.
The desired functionality is to have all children checkboxes checked when the parent is checked, and vice versa.
$scope.$watch('destinations', function(destinations){
var total_selected = 0;
angular.forEach(destinations, function(continent){
continent.countries_selected = 0;
angular.forEach(continent.countries, function(country){
total_selected += country.selected ? 1 : 0
continent.countries_selected += country.selected ? 1 : 0
if (continent.countries_selected == continent.countries.length) {
continent.selected = true;
} else {
continent.selected = false;
}
});
});
$scope.select_all = function(continent){
continent.selected = true;
}
$scope.total_selected = total_selected;
}, true);