Angular.copy function

Question

I noticed the following code recently in an Angular tutorial...

<div ng-app="myApp" ng-controller="formCtrl">
  <form novalidate>
    First Name:<br>
    <input type="text" ng-model="user.firstName"><br>
    Last Name:<br>
    <input type="text" ng-model="user.lastName">
    <br><br>
    <button ng-click="reset()">RESET</button>
  </form>
  <p>form = {{user}}</p>
  <p>master = {{master}}</p>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('formCtrl', function($scope) {
    $scope.master = {firstName: "John", lastName: "Doe"};
    $scope.reset = function() {
        $scope.user = angular.copy($scope.master);
    };
    $scope.reset();
});
</script>

With respect to the line: $scope.user = angular.copy($scope.master);, could this not have been simplified to: $scope.user = $scope.master; seeing that $scope.master is going to be an immutable constant in this case?

Okay, so how are the two versions of that statement different? Wouldn't $scope.user = $scope.master do the same thing, and if not, what would this statement do in comparison to the angular.copy() version? — Eliseo D'Annunzio
– Eliseo D'Annunzio, Commented Jun 4, 2015 at 22:41
You also have to remember that Angular uses 2-way data binding. If you just use = then any changes made to scope.user would be reflected in scope.master. If you're a picky about semantics, the fact that the one is named "master" is indicative that it is the base model for all others to be copied from. You would not expect a child to change the parent. Therefore, a copy is made. — MBielski
– MBielski, Commented Jun 4, 2015 at 22:50
Also, to the person that downvoted a legitimate question, you should remember that just because it is "blatantly obvious" to you does not mean that everyone else should know it. — MBielski
– MBielski, Commented Jun 4, 2015 at 22:52
@MBielski I appreciate the support... I've only just started learning AngularJS as of yesterday... I hadn't reached anything in relation to two-way data binding as yet; so thanks for the heads up. — Eliseo D'Annunzio
– Eliseo D'Annunzio, Commented Jun 4, 2015 at 23:04

Daniel A. White · Accepted Answer · 2015-06-04 22:42:33Z

3

When you do = in JavaScript with objects, you are only assigning the reference, not creating a new object (new reference). angular.copy creates a new object in this case.

In code terms:

var obj1 = {}, var obj2 = {}
obj1 !== obj2; // true
obj1 = obj2;
obj1 === obj2; // true
obj1 = angular.clone(obj2);
obj1 !== obj2; // true

answered Jun 4, 2015 at 22:42

Daniel A. White

192k49 gold badges389 silver badges473 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Josh Beam Over a year ago

To add to this awesome answer for clarity for the OP, if you were to do $scope.user = $scope.master and you mutated $scope.user later, you would also end up mutating $scope.master. angular.copy directly copies every key and value from the object into a completely new object.

Collectives™ on Stack Overflow

Angular.copy function

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related