Copy $scope for old/new values

by Rob Rothe

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<div ng-app="app" class="container">
  <div ng-controller="Controller">
    <form name="myform">
      <div ng-repeat="(key, keyvalue) in newfields">
        <input name="{{key}}" ng-model="newfields[key]" ng-blur="watchField(key)">
      </div>
    </form>
    <hr>
    <ul>
      <li ng-repeat="(key,value) in formfields">{{formfields[key]}} is now {{newfields[key]}}</li>
    </ul>
  </div>
</div>

CSS

body {
  padding-top: 20px;
}

JavaScript

angular
  .module('app', [])
  .controller('Controller', Controller);

function Controller($scope) {
  $scope.formfields = {
    "FIELD1": "",
    "FIELD2": "",
    "FIELD3": "Prepopulated",
    "FIELD4": ""
  };

  $scope.newfields = angular.copy($scope.formfields);

  $scope.watchField = function(key) {
    $scope.formfields[key] = $scope.newfields[key];
  }
}