JSFiddle - React, Tailwind, and code Playground
HTML
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.4.1/angular.min.js"></script>
<div ng-app="app">
<div ng-controller="testCtrl">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="table table-bordered">
<tr id="myBlusteringAttempt">
<td width="90%">
<p>Clear/Check all options</p>
</td>
<td width="10%" align="center" valign="middle">
<input type="checkbox" ng-model="toggle" ng-change="toggleCheckboxes()">
</td>
</tr>
<tr id="existing-code-that-works" ng-repeat="declaration in LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations">
<td width="90%">
<p>{{declaration.DeclarationText}}</p>
</td>
<td width="10%" align="center" valign="middle">
<input type="checkbox" ng-model="declaration.AcceptDeclaration">
</td>
</tr>
</table>
<hr>
<h4>Debug</h4>
<pre>
toggle model: {{ toggle}}
{{ LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations | json}}</pre>
</div>
</div>
CSS
@import'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css';
JavaScript
angular.module('app', [])
.controller('testCtrl', ['$scope', function ($scope) {
$scope.toggle = false;
$scope.toggleCheckboxes = function () {
angular.forEach($scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations, function (value, key) {
value.AcceptDeclaration = $scope.toggle;
});
}
$scope.LegalDeclaration = {};
$scope.LegalDeclaration.ReplacementOfPolicy = {};
$scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations = [{
DeclarationText: "dec1",
AcceptDeclaration: true
}, {
DeclarationText: "dec2",
AcceptDeclaration: false
}, {
DeclarationText: "dec3",
AcceptDeclaration: false
}, {
DeclarationText: "dec4",
AcceptDeclaration: true
}, ]
}]);