Angular.js $watch - a string will propagate successfully but a variable won't

Question

I have the following view in my code:

<div data-ng-controller="HelloCtrl">
    {{counties.selected}}
</div>

This piece of code will update the html successfully (when $scope.counties.selected is set to a string:

$scope.$watch('counties.selected', function(newValue, oldValue) {
   $scope.counties.selected = 'string';
});

However, the html doesn't update when $scope.counties.selected is set to a variable as below. console.log(newValue); show that newValue has the expected value set:

$scope.$watch('counties.selected', function(newValue, oldValue) {
   console.log(newValue);
   $scope.counties.selected = newValue;

});

Why doesn't newValue propagate to the html?

Why do you have $scope.$watch on 'counties.selected', and then modify $scope.counties? Wouldn't changing $scope.counties.selected directly in the controller lead to the view updating? — Dan Tang, Mar 07 '14 at 13:24
That is what I expected but the updating isn't happening. I am trying to figure out how to propogate the change to all of the views that contain `{{counties.selected}}`. — user1577173, Mar 07 '14 at 14:26

score 2 · Answer 1 · answered Mar 07 '14 at 13:31

2

You do not need to $watch this value. It will be updated automatically.

http://plnkr.co/edit/0HEJEBWbYMGU4bUrAcm0?p=preview

Here is working example with watcher, but this $watch is there excess.

http://plnkr.co/edit/f21n0bvPHU8ILQpW8M78?p=preview

answered Mar 07 '14 at 13:31

Goodnickoff

2,267
1
15
14

The update only occurs automatically if the `{{counties.selected}}` is in the same view as the `` that I'm using to update the model. What I'm trying to do is update '{{counties.selected}} in a different view. – user1577173 Mar 07 '14 at 14:21
@user1577173 If you create another instance of controller `HelloCtrl`, then you create another `$scope` and the other `counties.selected` value. http://plnkr.co/edit/J1mTzNxRGSs2TSULsq6g?p=preview – Goodnickoff Mar 07 '14 at 14:26
2

@user1577173 if you want share data between controllers then you need to create the service. http://stackoverflow.com/questions/20181323/passing-data-between-controllers-in-angular-js – Goodnickoff Mar 07 '14 at 14:27

score 1 · Accepted Answer · answered Mar 07 '14 at 15:00

I would use a factory to pass data between the two controllers. We can inject the CountiesFactory into both the controllers as a dependency injection, and modifying the object in one controller will affect the values in the other controller.

http://jsfiddle.net/t5x8j/

JS

angular.module('testApp', [])
.controller('MyFirstCtrl', function($scope, CountiesFactory) {
    $scope.temp = CountiesFactory;
})
.controller('MySecondCtrl', function($scope, CountiesFactory) {
    $scope.counties = CountiesFactory;
})
.factory('CountiesFactory', function() {
    return {
        options: [
            {
                text: 'blah blah',
                value: 1
            },
            {
                text: 'meh meh',
                value: 2
            }            
        ]
    }
})

HTML

<body ng-app='testApp'>
    <div ng-controller='MyFirstCtrl'>
        <select ng-model='temp.selected' ng-options='option.text for option in temp.options'></select>
    </div>

    <div ng-controller='MySecondCtrl'>
        {{ counties.selected }}
    </div>


</body>

I would call it `CountiesService` instead. This is more in line with the Angular `Service` concept, not `Factory`. — demisx, Sep 16 '14 at 20:47

Angular.js $watch - a string will propagate successfully but a variable won't

2 Answers2