title: Using AngularJS "copy()" to avoid reference issues
body: <p>I'm displaying a list of items, each of which has an "edit"-button next to it. A click on that opens an angular ui modal window and the user can change some properties of the specific item.</p>
  
  <p>Now, what bugged me was that when typing in this edit-window, the specific item in the list of items reflected the changes immediatly. I only wanted it to update when the user clicked 'ok' in the modal, and to not change at all if the user chose 'cancel'.</p>
  
  <p>My workaround uses copy to make a, well, copy of the chosen item that then serves as model for the view:</p>
  
  <pre><code>var modalInstance = $modal.open({
      templateUrl: 'scripts/app/views/editBond.html',
      controller: function ($scope, $modalInstance, bond) {
          $scope.bond = angular.copy(bond);
          $scope.ok = function () {
              $modalInstance.close($scope.bond);
          };
          $scope.cancel = function () {
              $modalInstance.dismiss('cancel');
          };
      },
      resolve: {
          bond: function () {
              return bond;
          }
      }
  });
  </code></pre>
  
  <p><strong>Is using angular.copy() appropriate to avoid such issues? Is this a scope issue at all?</strong></p>