I've got a problem where $rootScope.$broadcast events aren't being fired:

App.run(function($rootScope){
    var text = 'Not So Static Now';
    $rootScope.$broadcast('event:staticText', text);
}).$inject = ['$rootScope'];


App.controller('Ctrl1', function($scope, $rootScope) {
   $scope.staticText = "Static Text";

    var things = [
        'AngularJS',
        'StackOverflow',
        'JSFiddle'
    ];

    $scope.$emit('event:things', things);

    $scope.$on('event:staticText', function(e, args){
        $scope.staticText = args;
    });

}).$inject = ['$scope', '$rootScope'];

The above should change the {{staticText}} output to 'Not so Static Now' but it doesn't.

I've created a JSFiddle to demonstrate the problem /

This is part of a bigger issue I'm trying to debug where IE9 isn't firing the events after the page gets refreshed (works first time but on refresh - F5 or the refresh button nothing happens).

Any help / Advice would be appreciated

I've got a problem where $rootScope.$broadcast events aren't being fired:

App.run(function($rootScope){
    var text = 'Not So Static Now';
    $rootScope.$broadcast('event:staticText', text);
}).$inject = ['$rootScope'];


App.controller('Ctrl1', function($scope, $rootScope) {
   $scope.staticText = "Static Text";

    var things = [
        'AngularJS',
        'StackOverflow',
        'JSFiddle'
    ];

    $scope.$emit('event:things', things);

    $scope.$on('event:staticText', function(e, args){
        $scope.staticText = args;
    });

}).$inject = ['$scope', '$rootScope'];

The above should change the {{staticText}} output to 'Not so Static Now' but it doesn't.

I've created a JSFiddle to demonstrate the problem http://jsfiddle.net/flavrjosh/uXzTV/

This is part of a bigger issue I'm trying to debug where IE9 isn't firing the events after the page gets refreshed (works first time but on refresh - F5 or the refresh button nothing happens).

Any help / Advice would be appreciated

• javascript
• angularjs

• Just wondering why do you want to do this ? – maxisam Commented Nov 16, 2012 at 4:22
• Basically App.run() will contain logic that checks if a user is logged in. It fires an event after the service promise object returns the user info to verify the login. Other controllers can listen to and act on the login verified event. – Josh Holloway Commented Nov 16, 2012 at 12:04
• Why don't you have a service to check this and called this service in every controller you want ? Both ways need to add some code in controllers anyway. – maxisam Commented Nov 16, 2012 at 15:35
• This is a simplied example. The full version uses a service with the defer module to provide a promise object which fired the event on success response. This had the same result. I eventually just used $scope.$watch() for when the value was changed by the promise callback. – Josh Holloway Commented Nov 19, 2012 at 15:20
• Yeah, that sounds better. Because I kinda feel the way you used run is kinda not the way it designed for. – maxisam Commented Nov 19, 2012 at 17:12

1 Answer 1

It appears that the problem's caused by the Child scopes not being setup when the $rootScope.$broadcast event is fired.

I resolved the example by using:

App.run(function($rootScope, $timeout){
    var text = 'Not So Static Now';

    $timeout(function(){
        $rootScope.$broadcast('event:staticText', text);
    }, 100);
}).$inject = ['$rootScope'];

and:

App.controller('Ctrl1', function($scope, $rootScope) {
    $scope.staticText = "Static Text";

    var things = [
        'AngularJS',
        'StackOverflow',
        'JSFiddle'
    ];

    $scope.$emit('event:things', things);

    $scope.$on('event:staticText', function(e, args){
        $scope.$apply(function(){
            $scope.staticText = args;
        });
    });

}).$inject = ['$scope', '$rootScope'];

which can be seen here

Not sure if this is the best solution but it works.