In my AngularJS view, I have multiple checkboxes representing different terms of an agreement.
<div class="modal-body">
<div class="col-xs-12 form-group">
<p>I acknowledge that I understand the following:</p>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term1">Some term1 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term2"> Some term2 goes here
is not a credit transaction.
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term3"> Some term3 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term4"> Some term4 goes here
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" ng-model="agreement.term5"> Some term5 goes here
</label>
</div>
<div class="checkbox" >
<label>
<input type="checkbox" ng-model="agreement.term6"> Some term6 goes here
</label>
</div>
</div>
Below the checkboxes, there is a button that should only be enabled when all checkboxes are checked. This markup is displayed in a dynamically loaded modal window. I attempted to implement this functionality based on a solution from this article, but it resulted in errors when the view was loaded dynamically.
<div class="modal-footer">
<button type="button" class="btn btn-primary pull-left" data-dismiss="modal" ng-click="$close();">Confirm</button></div>