How to Copy with angular.copy in AngularJS

angular.copy is an AngularJS API for copying a value, commonly an object or array, so edits to the copy do not change the original through shared nested object references. This guide covers its two call forms and a form-state pattern. It concerns AngularJS; modern Angular does not provide this AngularJS API.

Understanding angular.copy deep-copy behavior

A shallow copy makes a new outer object but can leave nested objects shared. A deep copy recursively copies nested data, so changing a nested property on the copy does not change that property on the source. Think in terms of independent object state; a deep copy does not promise a particular physical memory layout.

For example, if source.profile is an object, then after copy = angular.copy(source), changing copy.profile.name leaves source.profile.name unchanged. This is useful when a form or editor needs a working version of data while keeping a separate baseline for reset.

Copying without a destination

Call angular.copy(source) with one argument to create and return a new copy. Keep the return value, for example var savedForm = angular.copy($scope.form);. The original remains available as the source, while savedForm can serve as a snapshot for later comparison or reset.

The following runnable JavaScript reference example shows why nested state needs an independent copy. It uses the language’s structuredClone operation, not AngularJS, so its output demonstrates the reference behavior only and does not test angular.copy.

Run this JavaScript reference example:

const source = { profile: { name: "Mina" } };
const copy = structuredClone(source);
copy.profile.name = "Lee";
console.log(source.profile.name);
console.log(copy.profile.name);

Mina
Lee

Copying into an existing destination

Use angular.copy(source, destination) when another part of the application must keep the destination object’s identity. AngularJS copies source data into that destination and returns it. This is useful when a scope property or another consumer already holds a reference to the destination object. For instance, angular.copy($scope.form, savedForm) updates the saved object from the current form while retaining the savedForm reference.

The two forms serve different purposes: the one-argument form gives you a new value to store; the two-argument form updates an object you already hold. Avoid assigning a newly returned object when other code depends on the existing destination reference.

Resetting and saving form state

Take a snapshot when the form is initialized: var savedForm = angular.copy($scope.form);. To reset the fields while preserving the existing form object, use angular.copy(savedForm, $scope.form). To replace the saved baseline with the user’s current edits, use angular.copy($scope.form, savedForm). The first argument is always the source and the second is the destination; reversing them reverses the direction of the copy.

The illustration shows a name field with reset and save controls alongside the displayed form and member values. Those values are useful for seeing the example’s intended state relationship; they are not output from an AngularJS runtime execution.

Limitations and unsupported values

Do not use the same object as both arguments: angular.copy(value, value) is not a supported self-copy call. Pass a distinct destination when using the two-argument form. The destination form is also a mutation: code holding that destination reference will observe its updated contents.

The supplied task materials do not include an AngularJS runtime result or an authoritative API reference, so this article does not generalize behavior for every JavaScript value type or framework-managed object. Check the documentation for the AngularJS version used by your application before relying on copying special values. The runnable reference example above is explicitly a JavaScript demonstration, not evidence that an AngularJS call was executed.