<!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');
  };
});