Toggle all Angular checkboxes in a group

Question

I have a table of text-checkbox items, each with a description and a checkbox. I now need to add an uber-checkbox that will either clear or check all boxes. The current code, is shown below, with my first attempt at a solution highlighted.

<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-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>

I could probably so easily do this with jQuery, but I'd rather use Angular's jQuery facade, and let there be no miscegenation of frameworks.

Answer 1

In toggleCheckboxes, you just need to set all the models to the value you want.

var currentAllStatus = false;
$scope.toggleCheckboxes = function () {
    currentAllStatus = !currentAllStatus;
    $scope.LegalDeclaration.ReplacementOfPolicy.ReplacementPolicyDeclarations.forEach(function (declaration) {
        declaration.AcceptDeclaration = currentAllStatus;
    });
};