title: angular.copy() isn't creating an independent copy of an object
body: <p>I have an AngularJS app that uses a factory to load JSON data into objects.  Note that the following example is a VERY stripped down version of the real-life app.  The user objects use getter/setter methods to access their properties because the real-life app must handle more logic than a simple property assignment.  This means I cannot simply bind to the ngModel on the view - I have to use custom directives.  When I want to make edits to an object, I create a copy of the object in the controller, let users make changes to it in the view, and at the end either save or cancel those changes in the controller.  However, when I'm calling <code>angular.copy()</code>, the two objects still seem linked because changing data in one also changes data in the other.  Why is this?</p>
  
  <p>Here is my JSFiddle:  <a href="http://jsfiddle.net/SqUu3/4/" rel="nofollow">http://jsfiddle.net/SqUu3/4/</a>
  Here is my view:</p>
  
  <pre><code>&lt;div ng-app="foo" ng-controller="ctrl"&gt;
      &lt;div ng-repeat="(userID, user) in users"&gt;
          &lt;span ng-if="inEditMode(userID)"&gt;
              &lt;input type="text"
              ng-model="$name"
              ng-model-getter="editUsers[userID].getName()"
              ng-model-setter="editUsers[userID].setName($value)" /&gt;
              &lt;button ng-click="saveChanges(userID)"&gt;Save&lt;/button&gt;
              &lt;button ng-click="setEditMode(editUsers[userID].getID(), false)"&gt;Cancel&lt;/button&gt;
          &lt;/span&gt;
          &lt;span ng-if="!inEditMode(userID)"&gt;
              {{user.getName()}}
              &lt;button ng-click="setEditMode(userID, true)"&gt;Edit&lt;/button&gt;
          &lt;/span&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Here is my controller:</p>
  
  <pre><code>angular.module('foo', [])
  .controller('ctrl', function($scope, UserFactory)
  {
      // Maps user IDs to user objects
      // Using hash instead of array for fast access by ID
      $scope.users = UserFactory.load();
      // Maps IDs of users to copies of the respective user objects, used for editing
      $scope.editUsers = {};
  
      // Return whether or not we're editing the user
      $scope.inEditMode = function(userID)
      {
          return $scope.editUsers.hasOwnProperty(userID);
      };
  
      // Copy the changes made to the actual user object
      $scope.saveChanges = function(userID)
      {
          $scope.users[userID] = angular.copy($scope.editUsers[userID]);
          // Don't need the edit-copy, so get rid of it
          delete $scope.editUsers[userID];
      };
  
      // Turn edit mode on/off
      $scope.setEditMode = function(userID, inEditMode)
      {
          if(inEditMode)
          {
              // IN THEORY, this should create two independent copies of the same object
              $scope.editUsers[userID] = angular.copy($scope.users[userID]);
  
              /**
               * PROOF THESE ARE THE SAME OBJECTS:
               * This shouldn't affect the edit-copy in the view, but it does
               * Note that I am only doing this next call to prove that angular.copy() 
               * isn't giving me a new, independent copy of the user object
               */
              $scope.users[userID].setName("WHY IS THIS THE SAME");
          }
          else
          {
              // We are effecively canceling the changes we've made
              delete $scope.editUsers[userID];
          }
      };
  })
  </code></pre>
  
  <p>The interesting part is the <code>IN THEORY...</code> line (line 30 in my JSFiddle).  This isn't creating an independent object.</p>