Can AngularJs $scope variables be conditionally bounded to each other? - angularjs

Question

So here my problem
I am trying to make form toggles with a global toggle to basically check and uncheck all of them using ng-model.
$scope.globalToggle =
{
"toggle": true
}
$scope.Toggles =
{
"toggle1": true,
"toggle2": true,
"toggle3": true,
}
This is what Im trying to achieve in an efficient manner:
If global toggle is checked set all to true or false.
If any toggle is un-checked set global to false.
If any toggle is checked and the other two toggles are also checked
then set global to true.
Currently I have managed to use a long winded out process of scope functions and adding ng-click to each checkbox element to achieve this, but I was hoping there is some better way to achieve my goal where I don't have to use ng-click on my elements. Is it possible to have some binding between these two variables that can change their value based on the conditions when they are changed from the DOM using ng-model?

Answer 1

Here you have a snipped which does exactly what you want :)
you just have to put ng-click directive on your toggles and write your algorithm
basicaly that:
globalToggleClicked = function() {
for (var toggle in $scope.Toggles) {
if ($scope.globalToggle.toggle == true)
$scope.Toggles[toggle] = true;
else
$scope.Toggles[toggle] = false;
}
};
toggleClicked = function(toggle){
if (toggle == false)
$scope.globalToggle.toggle = false;
else if (toggle == true) {
var nbChecked = 0;
for (var t in $scope.Toggles) {
if ($scope.Toggles[t] == true)
nbChecked++;
}
if (Object.keys($scope.Toggles).length == nbChecked)
$scope.globalToggle.toggle = true;
}
};
multi toggle management
I know it's with ng-click, but you don't really have other ways to do that