How to pass data between sibling components without using $scope?

Question

I am making a component that contains 3 child components in this way:

Answer 1

Use custom events to achieve this. you can pass message across your application using event dispatchers $emit(name, args); or $broadcast(name, args); And you can listen for this events using method $on(name, listener);

Hope it helps

Ref: https://docs.angularjs.org/api/ng/type/$rootScope.Scope#$emit

Example: you can notify change like below from your header-component

$rootScope.$emit("menu-changed", "list");

And you can listen for the change in your main-component directive like

$rootScope.$on("menu-changed", function(evt, arg){
  console.log(arg);
});