JSFiddle - React, Tailwind, and code Playground
HTML
<div ng-app="" ng-controller="AppCtrl">
<div><input type="checkbox" ng-model="parentCheckbox" /> Parent Checkbox</div>
<div><input type="checkbox" ng-click="clickOthers()" ng-model="childCheckbox" /> Child Checkbox</div>
<br />
Another Checkbox that I want binding with Parent Checkbox. <br /> <br />
Meaning: If Child checkbox is clicked, it checks the parent checkbox, which then automatically binds with Third Checkbox and get that checked. But 2 way binding for ng checked is not working: <br /> <br />
<div><input type="checkbox" ng-model="parentCheckbox" /> A third Checkbox binding with Parent Checkbox</div>
</div>
CSS
.ng-invalid { border: 1px solid red; }
JavaScript
function AppCtrl($scope) {
$scope.slaves = [
{
name: 'One',
isChecked: false},
{
name: 'Two',
isChecked: false},
{
name: 'Three',
isChecked: false},
{
name: 'Four',
isChecked: false}
];
$scope.clickOthers = function () {
$scope.parentCheckbox = $scope.childCheckbox;
}
}