AngularJS Need to bind parent checkbox with child without using ng-model - angularjs

Question

I got an User list using ng-repeat via an API call.
For every User their is 5 categories and each category got 2-3 authorizations on true/false.
For every user/category/authorization I want a checkbox that will change the value of authorization.
When I check the checkbox of a User I want all his 5 categories + all the authorizations been check true and if I uncheck one authorization or categories of a User his checkbox will go false.
So if I recapitulate: there is a parent(User), child(Category) and grand child(Authorization).
I saw that we can use ng-model with ng-checked but in my checkbox, the ng-model is used for the boolean authorization (ng-model="authorization.Enabled") and for more than 1 child this no more work.
How can I manage this case ? Need a $watcher ?
Thanks for your help !

Answer 1

You can use ng-click on each child/grand child.
Pass parent object (user or cathegory) object in it and modify its boolean value on specific condition (when all childs are true or not)
You shouldn't use ng-click and ng-model together, you can avoid doing this by use ng-checked and ng-click on parent(user or cathegory) checkbox.
vm.authorizationCheckboxClick = function (user,category, authorization) {
authorization.booleanValue = !authorization.booleanValue;
if (authorization.booleanValue){
category.booleanValue = true;
category.authorizations.forEach(function(element) {
if(!element.booleanValue){
category.booleanValue = false;
break;
}
}, this);
}
else {
category.booleanValue = false;
}
if (category.booleanValue){
user.booleanValue = true;
user.categories.forEach(function(element) {
if(!element.booleanValue){
user.booleanValue = false;
break;
}
}, this);
}
else {
user.booleanValue = false;
}
}
This example function changing value of authorizations and then changing bolean values of parent category and user. You can bind this values to ng-checked directive