Angular: Update service and share data between controllers

angularjs, factory, javascript, promise, service

Solution

You can use `$broadcast` to broadcast an event to the `rootScope` and use `$on` to define listener to listen to this specific event.

function ControllerA($scope, myService, $rootScope) {
    $scope.message = myService.getMessages();
    $scope.updateMessage = function () {
        $scope.message = 'Hello Max';

        $rootScope.$broadcast("HelloEvent", {
            msg: $scope.message
        });
    };
}

function ControllerB($scope, myService, $rootScope) {
    $scope.message = myService.getMessages();

    $rootScope.$on("HelloEvent", function (event, message) {
        $scope.message = message.msg;
    });
}

Updated:

I got the above solution just before you updated your question. If you don't want to use $broadcast or $on, you can share the object via `$rootScop`e like this

function ControllerA($scope, myService, $rootScope) {
    $scope.message = myService.getMessages();
    $scope.updateMessage = function () {
        $scope.message = 'Hello Max';
        $rootScope.message = 'Hello Max';
    };
}

function ControllerB($scope, myService, $timeout, $rootScope) {
    $scope.message = myService.getMessages();

    $rootScope.$watch('message', function (oldV, newV) {
        if(oldV === undefined && oldV === newV) return;
        $scope.message = $rootScope.message;
    });
}

Demo using broadcast Demo without using broadcast

Problem

I'm using a service to grab some data from an API: ``` angular.module('myApp', []) .factory('myService', function($q, $timeout) { var getMessages = function() { var deferred = $q.defer(); $timeout(function() { deferred.resolve('Hello world!'); }, 2000); return deferred.promise; }; return { getMessages: getMessages }; }); ``` And I use these data in multiple controllers. ``` function ControllerA($scope, myService) { $scope.message = myService.getMessages(); $scope.updateMessage = function(){ $scope.message = 'Hello Max'; }; } function ControllerB($scope, myService) { $scope.message = myService.getMessages(); $scope.$watch('message', function(){ // 'Hello Max' }, true); } ``` I would like to update the data in every controller, but when I change the $scope.message in the ControllerA, it doesn't fire a change in the ControllerB. EDIT: The thing is that I would like to avoid using "$broadcast" and "$on". Any ideas? Here's a jsfiddle: http://jsfiddle.net/Victa/McLQD/

Original source