$ rootScope emit needs $ timeout, why?

Good afternoon guys,

Let's assume that I have a blabla.html page (with its controller / component / sass), which makes use of a < test-component > . On the controller of this < test-component>, I'm calling a particular service. After ensuring that I get the information from the service invoked, I do the following:

$rootScope.$emit('dataWasCollected');

So, what I want to do here is to get the dataWasCollected event in blabla.controller.js to print a simple phrase.

To do this, I'm using the following (in blabla.controller.js ):

$rootScope.$on('dataWasCollected, () => { console.log("Data was collected!"); });

This seems legitimate and valid. However, for this to work, I have to add a $ timeout of, say, a second, in the first $ emit. If you do not use this $ timeout , nothing is printed to the console.

$timeout(() => {
    $rootScope.$emit('mapsWereSelected');
},1000);

In this way, it works.

Can anyone explain the cause for this? How to avoid $ timeout in this situation?

Thank you!