<!DOCTYPE html>
<html ng-app="viewApp">
<head>
<script src="https://code.angularjs.org/1.5.6/angular.min.js
"></script>
<script src="script.js"></script>
</head>
<body ng-controller="FormController">
<form name="nameForm" onSubmit="save()">
<div ng-form="nameForm">
<input name="first" ng-model="name.first" ng-model-options="{ updateOn: 'submit' }"><br>
<input name="last" ng-model="name.last" ng-model-options="{ updateOn: 'submit' }"><br>
<button type="submit">Save</button>
<button type="button" ng-click="cancel()">Cancel</button>
</div>
</form>
<br><br>
Name In Scope: {{name.first}} {{name.last}}
</body>
</html>
//Quick & Dirty...
var viewApp = angular.module('viewApp', [])
viewApp.controller('FormController', function ($scope) {
$scope.name = {
first: 'john',
last: 'doe'
};
$scope.save = function() {
alert('saved, scope changed');
};
$scope.cancel = function() {
$scope.nameForm.$rollbackViewValue();
alert('cancelled, scope rolled back');
};
});