Angularjs: Object property value does not update

Question

I know there are multiple questions related to my issue, but I still have problem fixing this. I have the following html and JavaScript code:

<!doctype html>
<html ng-app="Demo">
<head>
    <meta charset="utf-8" />
    <script src="https://code.jquery.com/jquery-3.2.1.min.js" integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4=" crossorigin="anonymous">      
    </script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js">     
    </script>

</head>
<body ng-controller="AppController">

        <input type="" name="" ng-model="docs[1].value">
        {{m3.value}}
        {{m4}}

    <script type="text/javascript">
        var app = angular.module('Demo', []);

        app.controller(
            "AppController",
            function( $scope ) {

                $scope.docs=[{value:"first doc"}, {value:"second doc"}];                

                $scope.m3=$scope.docs[1]; 
                $scope.m4=$scope.docs[1].value;

            }
        );


    </script>

</body>
</html>

When I type in the input, the m3.value gets updated but m4 does not! I can't figure out why this is happening. Any comment is appreciated.

31piy · Accepted Answer · 2017-11-01 08:46:07Z

4

Statement 1 :

$scope.m3=$scope.docs[1];

This statement storing the reference for model docs[1]

so, {{m3.value}} will get updated model value.

Statement 2 :

$scope.m4=$scope.docs[1].value;

This statement copying the actual primitive value.

so, {{m4}} still get old value

edited Nov 1, 2017 at 8:46

31piy

23.9k6 gold badges51 silver badges69 bronze badges

answered Nov 1, 2017 at 4:28

RIYAJ KHAN

15.3k5 gold badges34 silver badges56 bronze badges

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

5 Comments

vmontazeri Over a year ago

Thanks, but how should I bind to the docs[1].value in the controller then?

RIYAJ KHAN Over a year ago

@user1512681 you can use $scope.docs[1].value or m3.value to get the updated value in controller

Aleksey Solovey Over a year ago

(off topic) is it still a two-way binding? will it be part of watchers?

vmontazeri Over a year ago

@RIYAJKHAN $scope.docs[1].value does not give me the updated value.

RIYAJ KHAN Over a year ago

@user1512681 check this one . plnkr.co/edit/sZ2hKSzolTOzZG6HcupN?p=preview

vmontazeri · Accepted Answer · 2017-11-01 16:38:49Z

1

Ok so the way I solved it is to add a watcher to m3.value:

$scope.$watch('m3.value', function(){
     console.log('Changing');
     $scope.m4 = $scope.m3.value;
});

And now $scope.m4 updates.

answered Nov 1, 2017 at 16:38

vmontazeri

4233 silver badges21 bronze badges

2 Comments

vmontazeri Over a year ago

This is the only way that worked for me, the ng-change that you suggested does not fit to what I want. Please note that the code I provided here is a simplified version of my original code

RIYAJ KHAN Over a year ago

I shown ng-change just to show you that modal is updating and not suggested for your code use

Collectives™ on Stack Overflow

Angularjs: Object property value does not update

2 Answers 2

5 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related