Need to re-render view and re-initialise controller in AngularJS - angularjs

Question

I have a form that I want to reset. If I use the $setPristine method in Angular, this gets me some of the way.
However, if you look at the following isolated case, you will see that when you press the reset button to reset the form, a save message will be logged to the console. This is where I would write the code to save any changes made to the form to the server.
http://jsbin.com/OLIziRe/14/edit
In this example, save is logged when the value is different. This includes when the form is set to pristine, as the previous value will be whatever it was before the form was reset, and the new value will be undefined.
I do not want this behaviour. I only want to log the save message if there are changes — if the form is reset, there should be no "previous value".
The only solution I can come up with is to do some trickery in order to re-render the view and re-initialise the controller, thus losing all previous state.
http://jsbin.com/OLIziRe/12/edit
What would be the AngularJS way to do this?

Answer 1

You can do just like that with your first solution :
var app = angular.module('myApp', []);
app.directive('someDirective', function () {
return {
restrict: 'A',
require: 'ngModel',
link: function (scope, element, attrs, ctrl) {
scope.$watch(function () {
return ctrl.$modelValue;
}, function (newValue, lastValue) {
// Only save if the values do not match
if(scope.someForm.$dirty){
console.log(newValue !== lastValue ? 'save' : '');
}
});
}
}
});
Before the console.log you check if the form is in $dirty state, i.e if the user have set a value to the form.
When you do a $setPristine() you reset the form in $pristine state so the $dirty state is false.
Hope it helps !