We're implementing a widget screen that consists of multiple widgets/modules:

• Products: Lists products
• Product Details: Loads product details from server once selection in "Products" changes.
• Related Products: Loads related products from server once selection in "Product" changes.
• Compare: Does some stuff on the server once "Compare" in "Product Details" is clicked.

Sounds pretty easy, right? Our problem is, that we cannot find a good solution how the components should communicate with each other. They should be as loosely coupled as possible. So I don't want the "Products" widget to know that the "Product Details" widget and the "Related Products" widget exist. Maybe some widgets are not even displayed on the screen right now (so nothing should happen there).

The only solution that came to our mind was to use $rootScope.$broadcast and $rootScope.$on to work with events such as "ProductSelectionChanged" or "CompareClicked".

Unfortunately $rootScope.$broadcast seems to cause performance issues, as far as I understood: What's the correct way to communicate between controllers in AngularJS? AND the proposed solution by Christoph using $rootScope.$emit does not work in IE8.

Should I just use $rootScope.$broadcast? Or is there a better solution?

Thanks for your help!

Cheers Michael

I do not claim that this is the best solution but I encountered the same problem of communication between my components and the $scope.$broadcast() performance issue. With my team, we decided to develop a small PubSub service. It is very simple and can communicate events quickly, with parameters.

If you want to give it a try, it's available here: angular-pubsub