not able to clear the whole form after pressing cancel button in AngularJs?
<p>i am unable to clear my form in some of the fields which have more than one validation.can  anyone please help?</p>


      
      

     
     
     
                                         
                                    
                                

<pre><code>                            &lt;div class="col-lg-4 col-md-6"&gt;
                                &lt;div class="form-group" data-ng-class="{ 'has-error' : vm.form.phonenumber.$invalid &amp;&amp; (vm.form.phonenumber.$dirty || vm.form.phonenumber.$touched)}"&gt;
                                    &lt;label class="control-label col-md-4 col-sm-3 col-xs-12" data-i18n=" _phoneNumber_"&gt;&lt;/label&gt;
                                    &lt;div class="col-md-8 col-sm-8 col-xs-10"&gt;
                                        &lt;input type="text" class="form-control col-md-7 col-xs-12" data-ng-model="vm.person.phoneNumber" required name="phonenumber" ng-pattern="/^[0-9]{10}$/" /&gt;
                                        &lt;span data-ng-show="vm.form.phonenumber.$error.required &amp;&amp; (vm.form.phonenumber.$dirty || vm.form.phonenumber.$touched)" class="help-block" data-i18n="_phoneNumrequired_"&gt;&lt;/span&gt;
                                        &lt;span class="help-block" data-ng-show="vm.form.phonenumber.$error.pattern &amp;&amp; vm.form.phonenumber.$dirty" data-i18n="_phoneNuminvalid_"&gt;&lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;
                            &lt;div class="col-lg-4 col-md-6"&gt;
                                &lt;div class="form-group" data-ng-class="{ 'has-error' : vm.form.mobilenumber.$invalid &amp;&amp; (vm.form.mobilenumber.$dirty || vm.form.mobilenumber.$touched)}"&gt;
                                    &lt;label class="control-label col-md-4 col-sm-3 col-xs-12" data-i18n=" _mobileNumber_"&gt;&lt;/label&gt;
                                    &lt;div class="col-md-8 col-sm-8 col-xs-10"&gt;
                                        &lt;input type="text" class="form-control col-md-7 col-xs-12" data-ng-model="vm.person.mobileNumber" required name="mobilenumber" ng-pattern="/^[0-9]{10}$/" /&gt;
                                        &lt;span data-ng-show="vm.form.mobilenumber.$error.required &amp;&amp; (vm.form.mobilenumber.$dirty || vm.form.mobilenumber.$touched)" class="help-block" data-i18n="_mobileNumrequired_"&gt;&lt;/span&gt;
                                        &lt;span class="help-block" data-ng-show="vm.form.mobilenumber.$error.pattern &amp;&amp; vm.form.mobilenumber.$dirty" data-i18n="_mobileNuminvalid_"&gt;&lt;/span&gt;
                                    &lt;/div&gt;
                                &lt;/div&gt;
                            &lt;/div&gt;`
</code></pre>

<p>angular function:</p>

<pre><code>function cancel() { vm.person = angular.copy(vm.original); vm.form.$setPristine(); vm.form.$setUntouched(); }
</code></pre>

<p><a href="http://i.stack.imgur.com/jieiQ.png" rel="nofollow">this is before pressing cancel</a></p>

<p><a href="http://i.stack.imgur.com/pNnQC.png" rel="nofollow">this is after cancelling</a></p>

<p>you can see that data in email,  phone and mobiles are not cleared</p>