Angular JS data binding not working for HTML5 reset button - angularjs

Question

I my angular application, I'm using a reset button to clear the data in a text box. But the binding is not working properly with the reset button.
<form>
<input type="text" name="email" ng-model="ch.email"><br>
<input type="reset" value="Reset">
</form>
<div>{{ch.email}}</div>
When some text is typed in the text box, it appears in the div, But after resetting, The text in the div doesn't disappears.
Please see the fiddle

Answer 1

You can use a button instead
HTML:
<form>
<input type="text" name="email" ng-model="changestore.sample">
<br>
<input type="button" value="Reset" ng-click="reset()">
</form>
<div id="textdisplay">
{{changestore.sample}}
</div>
JS:
$scope.reset=function(){
$scope.changestore={};
}
Working Fiddle:http://jsfiddle.net/aks0kmwe/
HTML 5 reset button won't clear the ng-model, it clears only the value from the input box
Working Example:http://jsfiddle.net/ADukg/12591/

Answer 2

HTML5 Reset button will only clears the input control values but not the angular ng-model values that doesn't mean it is refreshing the page but it resets html form fields to their initial values. Here is working example
Html:
<form>
<input type="text" data-ng-model="name" />
<span data-ng-bind="name"></span>
<input type="reset" value="Reset" />
</form>
Script:
var myApp=angular.module('myApp',[])
.controller('myCtrl',function($scope){
$scope.name="Angular JS";
})
When you click on reset button it will clear textbox but not span tag value.After this you try to access name property value of scope using angular.element($0).scope() by doing inspect element on browser and it is still "Angular JS" only.