Angularjs ui-route correct implementation for multiple views

I would like to implement a page like this

I have the following folder structure:

-root/
--root.controller.js
--root.module.js
--root.routes.js
--root.html
--filters/
----filters.controller.js
----filters.module.js
----filters.routes.js
----filters.html
--tableData/
----tableData.controller.js
----tableData.module.js
----tableData.routes.js
----tableData.html
--graph/
----graph.controller.js
----graph.module.js
----graph.routes.js
----graph.html

I would like to know the best approach in order to manage call from each controller in the best way. I mean, from filters, I can change selection on dropdown or update other fields values, and then I would update data on tabledata. And if I change selection on tabledata I would update graph. Root url is '/root/{itemId}' and I cannot add some other value on querystring. How can I manage internal variables and methods?

thanks a lot

From my understanding, it's better to go for events $emit , $broadcast & on to achieve the same.

As I can see, you are having independent controllers with no relationship with most of the the other controllers.

Few suggestions to implement it:

1. use $rootScope.$emit and $rootScope.on if they controllers have no relationship. Make sure you are removing it manually though (can be ignored if the app is not too heavy but should be kept in mind). This link will be surely helpful . Eg:

If the filter is changed, an event filter-changed will be triggered. The graph.controller and table.controller will be informed and will render the UI accordingly.

2. Create a messaging service from where the controllers will subscribe and unsubscribe the events. That will keep numbers of events in check. You'll be aware of how many events have actually been created in the application.