AngularJS: Changing object does not update field but changing string directly does

Question

I feel like this is something trivial, but I've been stuck for awhile.

I have an object user , set in the directive UserSettings. The directive's element contains a button with html {{user.name}} to open a model for user settings. When the page loads user.name is set.

The user settings form in the modal is contained by a controller called UserSettingsForm. I've been trying to debug the controller and I'm confused by the behavior I'm seeing.

console.log @$scope.user # debug to show user object is there
@$scope.test = angular.copy(@$scope.user) # set test equal to a copy of user
@$scope.test.name = 'wowee' # change test object's 'name' property
@$scope.user = angular.copy(@$scope.test) # set user back to test
console.log @$scope.test # test is changed
console.log @$scope.user # user is equivalent to test

The above debugging works as expected, but the unexpected part (for me, at least) is the fact that {{user.name}} in the nav bar is not being updated. But when I do @$scope.user.name = @$scope.test.name the {{user.name}} field in the HTML is updated.

I am admittedly an angular noob (even though this is probably a JavaScript concept), but the logic I'm having trouble with doesn't make sense to me and I would be very appreciative if someone could clear it up for me, and maybe even give me a push in the right direction as far as properly updating the user object to equal the test object. test will eventually be an instance of the user settings form and only when the data is saved successfully will that instance be saved as user .

Answer 1

Angular is still watching the previous reference, even after you do the change.

If you use:

angular.copy(source, destination)

It will deleted all of the previous properties and replace them with the source properties.

Here's the updated example for your case:

angular.copy($scope.test, $scope.user)

That statement should solve the issue.