The view is not updated in AngularJS

Updating the model property has no effect on the view when updating the model in event callback, any ideas to fix this?

This is my service:

angular.service('Channel', function() {        
    var channel = null; 

return {        
    init: function(channelId, clientId) {
        var that = this;        

        channel = new goog.appengine.Channel(channelId);
        var socket = channel.open();

        socket.onmessage = function(msg) {
            var args = eval(msg.data);              
            that.publish(args[0], args[1]);
        };
    }       
};});

publish() function was added dynamically in the controller.

Controller:

App.Controllers.ParticipantsController = function($xhr, $channel) {
    var self = this;

    self.participants = [];     

    mediator.installTo($channel); // here publish function is added to service

    $channel.subscribe('+p', function(name) { // subscribe was also added with publish      
        self.add(name);     
    });                 

    self.add = function(name) {     
        self.participants.push({ name: name });     
    }
};
App.Controllers.ParticipantsController.$inject = ['$xhr', 'Channel'];

View:

<div ng:controller="App.Controllers.ParticipantsController">      
    <ul>
    <li ng:repeat="participant in participants"><label ng:bind="participant.name"></label></li>
   </ul>
  <button ng:click="add('test')">add</button>
</div>

So the problem is that clicking the button updates the view properly, but when I get the message from the Channel nothings happens, even the add() function is called

The view is not updated in AngularJS

Updating the model property has no effect on the view when updating the model in event callback, any ideas to fix this? This is my service: angular.service(‘Channel’, function() { var channel = null;

The view is not updated when the model updates in AngularJS

I have read threads on this issue such as: The view is not updated in AngularJS but I still can’t understand how to apply it on my simple example. I have this function: function MyPageView($scope) { v

view is not updated in AngularJS

I have an issue when I try to display data. I send my form and update my database (it works great, backend is ok) I use a button on the page to return to homepage The view of the homepage is not upd

AngularJS – view is not updated from modal dialog

I’m trying to update a view upon saving data to the DB. main.html <div ng-controller=’sitesController’> <div class=’modal-dialog’> <div class=’modal-content’> <div class=’modal-bo

Angularjs : Why I need to click on a button to get my view updated?

I’m trying to developpe a chrome extension with angularjs and I have a strange behaviour when I try to initialize the $scope with the url of the active tab. Here the code of my controller: var app = a

How to update view in angularJS when an object is updated outside of the scope

I have an object outside the AngularJS scope that looks something like: obj = { isBig : true, name: John … } it has many parameters and it was created outside the angular scope and it updates out

My Angular view is not updated with data form server

I am using Angularjs and i make a call form server to retrieve data. Data are successfully retrieved but my view is not updated. I don’t understand why. Here are the code i use. Angularjs and html cod

Scope not updated in AngularJS

I have just started using AngularJS. I’ve done the tutorial from the official site. I tried to start my own web application. I would like to resize and cut a div. I started by trying resize div b

AngularJS: Unable to reload/refresh view from controller

How do i refresh angularjs view from controller once the array/list is updated? Following is my code: <div class=main-page ng-app=GoalsListing1> <div ng-controller=CategoriesController a

Embedding AngularJS view

I have an AngularJS application that I believe is essentially pretty typical (alike many of the examples). <html ng-app=myApp … <body> … <div class=main ng-view></div> …

Answers

You are missing $scope.$apply().

Whenever you touch anything from outside of the Angular world, you need to call $apply, to notify Angular. That might be from:

  • xhr callback (handled by $http service)
  • setTimeout callback (handled by $defer service)
  • DOM Event callback (handled by directives)

In your case, do something like this:

// inject $rootScope and do $apply on it
angular.service('Channel', function($rootScope) {
  // ...
  return {
    init: function(channelId, clientId) {
      // ...
      socket.onmessage = function(msg) {
        $rootScope.$apply(function() {
          that.publish(args[0], args[1]);
        });
      };
    }
  };
});