Example 1: Model values are updated immediately as the form controls are changed. You can see the corresponding model values beneath each control.

Model Value: {{checkbox}}
Model Value: {{radioGroup1}}
Model Value: {{text}}
Model Value: {{textarea}}
Model Value: {{select}}


Example 2: The original model values don't change until "OK" is clicked because we keep two objects in our $scope; one is the master object and the other is a copy we make just for the controls in this form. Clicking "OK" will copy values from the form object to the real object and clicking "Reset" re-copies from the real object to the form object again, reverting the form back to its original values.

This pattern is very useful if you use jQuery UI Dialogs or Bootstrap Modals or something similar to present popup dialog type input forms. The convention is that those can usually be canceled by the user without having to commit his/her changes.

Model Value: {{obj.checkbox}}
Model Value: {{obj.radioGroup1}}
Model Value: {{obj.text}}
Model Value: {{obj.textarea}}
Model Value: {{obj.select}}


Example 3: Use the same model copying technique we used in example 4 but add validation. Note the use of ng-required to mark inputs which must be entered, ng-pattern to provide a regular expression for the zip code, and a validation test on the OK button.

Model Values

{{userInfo.firstName}} {{userInfo.lastName}}
{{userInfo.addressLine1}}
{{userInfo.addressLine2}}
{{userInfo.city}}, {{userInfo.state}} {{userInfo.zip}}