AngularJS $scope variable changing value for no reason?

Question

I have an angular controller that get's data using the $http.get() method. I assign the response data to $scope.foo and also $scope.bar.

I then bind $scope.foo to an input field using ng-model="foo", and then a $scope function $scope.buttonClick to a button using ng-click="buttonClick()".

When I change the value of the input field and select the button, $scope.buttonClick outputs both $scope.foo and $scope.bar and they appear to match the newly entered value. This is odd because I only binded $scope.foo. Why is this happening and how can I fix it?

controller:

angular.module('app')
.controller('controller', ($scope, $http) => {

    $document.ready(() => {

        $http.get('/data').then((res) => {
            $scope.foo = res.data;
            $scope.bar = res.data;
        });

        $scope.buttonClick = () => console.log($scope.foo, $scope.bar);
    });
});

(Uses ES6 Syntax) https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Functions/Arrow_functions

Possible duplicate of Why and when to use angular.copy? (Deep Copy) — georgeawg
– georgeawg, Commented Mar 17, 2017 at 18:13

Carlos Arauz · Accepted Answer · 2017-03-17 02:04:39Z

5

$scope.foo and $scope.bar is pointing to the same property that is res.data. You must copy the objects:

$scope.foo = angular.copy(res.data);

You are assigning a reference to data property of res object instead of assigning the value of data property

answered Mar 17, 2017 at 2:04

Carlos Arauz

8056 silver badges8 bronze badges

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

1 Comment

Maximillion Bartango Over a year ago

Works perfect. Thank you.

Dushyantha · Accepted Answer · 2017-03-17 02:57:45Z

1

This is a feature of angular JS two way data binding. If you assign same data into two different purpose, best way is get a copy

 $scope.foo = res.data;
 $scope.bar = angular.copy(res.data);

answered Mar 17, 2017 at 2:57

Dushyantha

2172 silver badges15 bronze badges

Comments

Pramod_Para · Accepted Answer · 2017-03-17 03:55:28Z

1

Use angular.copy when assigning the value of object or array to another variable and that object value should not be changed.

Without deep copy or using angular.copy, changing the value of object property will change the property value of all objects holding the same reference.

In your case $scope.foo and $scope.bar holding the same reference, so whenever you change the property of $scope.foo, $scope.bar is also getting updated. so you need to break the reference.

$scope.foo = angular.copy(res.data);

answered Mar 17, 2017 at 3:55

Pramod_Para

6833 silver badges10 bronze badges

Collectives™ on Stack Overflow

AngularJS $scope variable changing value for no reason?

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related