var myApp = angular.module('myApp', []);
myApp.controller('controller', ['$scope', function ($scope) {
$scope.master= {};
$scope.isFormDirty = false;
$scope.reset = function() {
$scope.user = angular.copy($scope.master);
$scope.$broadcast('formClean');
$scope.isFormDirty = false;
};
$scope.$on('formDirty', function (event, formName) {
$scope.isFormDirty = true;
});
$scope.reset();
}]);
myApp.directive('form', [function () {
return {
restrict: 'E',
require: 'form',
link: function (scope, element, attrs, ctrl) {
scope.$watch(attrs.name + '.$dirty', function (newValue, oldValue) {
if (newValue != oldValue && newValue === true) {
scope.$emit('formDirty', attrs.name);
}
});
scope.$on('formClean', function () {
ctrl.$setPristine();
});
}
};
}]);
<div ng-app='myApp'>
<div ng-controller="controller">
<div ng-show="isFormDirty" class="alert alert-error"><strong>You dirtied the form.</strong></div>
<form name="myForm">
<fieldset>
<legend>User Details</legend>
<label>First Name:</label>
<input type="text" ng-model="user.firstName" placeholder="First Name ..." required>
<label>Last Name:</label>
<input type="text" ng-model="user.lastName" placeholder="Last Name ..." required>
<div>
<button type="button" class="btn" ng-click="reset()" ng-disabled="myForm.$invalid">Reset</button>
</div>
</fieldset>
</form>
</div>
</div>
External resources loaded into this fiddle: