<!DOCTYPE html> <html> <head> <script src="angular.js"></script> <style> label { width: 250px; display: inline-block; vertical-align: middle; } input { vertical-align: middle; } .valueItems { display: inline-block; vertical-align: middle; } </style> </head> <body ng-app> <div> <label for="basicCheck">Basic checkbox:</label> <input id="basicCheck" type="checkbox" ng-model="basicCheckValue" /> <span class="valueItems"><strong>Value:</strong> {{basicCheckValue}}</span><br /> <label for="customValCheck">Checkbox with custom values:</label> <input id="customValCheck" type="checkbox" ng-model="customValCheckValue" ng-true-value="right" ng-false-value="wrong"/> <span class="valueItems"><strong>Value:</strong> {{customValCheckValue}}</span> </div> </body> </html>



Like the other input elements, we can bind a checkbox to its model variable, but we have something more for the checkbox type.

In the first checkbox of the example, whenever the selection state changes, a boolean true or false value is stored in the basicCheckValue model variable.

In the second checkbox of the example, we specify custom string values to store in the associated customValCheckValue model variable. The ng-true-value directive lets us specify which string has to be stored in the model variable whenever the checkbox is selected, while ng-false-value is used when the checkbox is not selected.