AngularJS Form Reset

Testing native form reset behavior in an Angular form.

by GlobalDomestic

HTML

<div ng-controller="MyCtrl">
    <form reset-directive="myModel" name="form">
        <input type="text" ng-model="myModel.foo" />
        <input type="text" ng-model="myModel.bar" />
        <input type="reset" value="Reset" />
        <pre>myModel: {{ myModel | json }}</pre>
        <pre>myModelCopy: {{ myModelCopy | json }}</pre>
        <pre>form pristine: {{ form.$pristine }}</pre>
    </form>
</div>

JavaScript

var myApp = angular.module('myApp', []);

myApp.controller('MyCtrl', ['$scope', function ($scope) {
    $scope.myModel = {
        foo: 'Boop',
        bar: 'Beep'
    };
    $scope.myModelCopy = angular.copy($scope.myModel);
}]);