Craig Craig - 11 months ago 62
AngularJS Question

AngularJS view not updating when model changes

I have a $rootScope variable like this:

$rootScope.queue = {'A1':{'Name':'John','ID':'A1'},'A2':{'Name':'Anna','ID':'A2'}};

In my controller I have a function like this where update is an object from the queue with more recent data:

$scope.onMessage = function(update) {
angular.extend($rootScope.queue[update['ID']], update);

The more recent data comes from an external application that sends the data to my application using the Google Channel API. Here is the code in the same controller:

channel = new goog.appengine.Channel('<?php echo $token ?>');
socket =;
socket.onmessage = $scope.onMessage;

My issue is, if I am viewing a person in the queue in my view e.g. John and I receive an update like(First name correction):


The $rootScope.queue is updated correctly however my view does not update unless I re-click the person.

For my view I have something like (setActive() sets a $scope variable called active to the ID):

<div ng-controller="queueController">
<div name="people" ng-model="people">
<div ng-repeat="people in queue" ng-click="setActive(people.ID)">{{ people.Name }}</div>
<div ng-model="queue">You clicked {{ queue[active].Name }}</div>

It was my understanding that in AngularJS if the data in queue changed my view would update also. What am I missing?

Answer Source

I believe the problem was that using ng-model="queue" was creating a $scope.queue instead of using the $rootScope.queue

To solve this I can define the queue like so:

$rootScope.myapp.queue = {'A1':{'Name':'John','ID':'A1'},'A2':{'Name':'Anna','ID':'A2'}};

And then use ng-model="myapp.queue"