AngularJS Broadcast not working on first controller load

Question

In this PlunkerDemo, I'm trying to broadcast an event from the parent controller to child controller. However doing it directly in the parent controller won't work. The handler doesn't register the event. However doing it based on an ng-click or based on setTimeout, it works. Is it due to the scope life cycle?

http://beta.plnkr.co/edit/ZU0XNK?p=preview

See the comments of the accepted answer. They explain my problem.

Answer 1

Any changes to angular scope must happen within the angular framework, If any changes have to be made outside the framework we have to use the .$apply function.

$apply() is used to execute an expression in angular from outside of the angular framework.

In your case you are triggering the $broadcast within setTimeout, where the callback gets called outside the angular framework.

So you have two solutions, either use the $timeout service provided by angular or use .$apply function.

I prefer to use the $timeout function.

var ParentCtrl = function($scope, $rootScope, $timeout){

    $scope.broadcast = function(){
        $rootScope.$broadcast('Sup', 'Here is a parameter');
    };

    $timeout(function(){
        $scope.$broadcast('Sup');
    }, 1000);

    //this one does not work! Most likely due to scope life cycle
    $scope.$broadcast('Sup');

    $scope.$on('SupAgain', function(){
        console.log('SupAgain got handled!');
    });

};

Demo: Fiddle

Using $apply

setTimeout(function(){
    $scope.$apply(function(){
        $scope.$broadcast('Sup');
    });
}, 1000);