AngularJS: Reset to pristine state

http://angularjs.org/

by Danish Farman

HTML

<script src="http://code.angularjs.org/angular-1.0.1.js"></script>
<h2>AnguarJS: Reset to pristine state</h2>

<p>What is the best way to reset some form to its pristine state?</p>
<p><a href="http://stackoverflow.com/questions/12603914/reset-form-to-pristine-state-angularjs-1-0-x">StackOverflow: Reset form to pristine state (AngularJS 1.0.x)</a></p>
<p>&nbsp;</p>

<div ng-controller="MyCtrl">
<form name="form">

    <input name="requiredField" 
         type="text" 
         ng-model="requiredField" 
         required="required">Required field<br>
    
  <button ng-click="reset()">Reset</button>

</form>

<hr/>
Pristine: {{form.$pristine}}
    
</div>

CSS

input.ng-dirty.ng-invalid {
            background-color: red;
        }

        input[required].ng-pristine {
            background-color: yellow;
        }

        input[required].ng-dirty.ng-valid {
            background-color: yellow;
        }

JavaScript

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

function MyCtrl($scope) {
    
    $scope.reset = function() {
        $scope.requiredField = '';
        // Todo: Reset field to pristine state, its initial state!
    };
}