Best way to update parts of a page from multiple controllers?

Question

I have a webpage with 2 controllers (using AngularJS). The first one manages the navigation bar and the page title. The second controller manages messages (or any other part of the page). What is the best way to "signal" the first controller to update the page's title with a given string?

Answer 1

Use event messaging, a button click on nav bar would trigger an emit(), the event handler registered with on() in the second controller will respond to the trigger.

$rootScope.$emit() and $rootScope.$on()

Working with $scope.$emit and $scope.$on

note that its calling the emit/on on the rootscope, which all children will be able to pubsub onto.

Answer 2

What I have done in the past is use the controller as syntax. I can then pass the first controllers title object into into the second controller and update it there without needing to broadcast a message.

Controller1 as c1
Controller2 as c2 

c2.functionThatUpdatesC1(c1.title, data) 

this.functionThatUpdatesC1 = function (c1Object, data) {
    //Do something here 
    c1Object = newValue;
};