How two controllers can communicate between each other (Mini-Challenge 9) Answer

Table of Content

Check out Mini-challenge 9 Instructions


There are several ways that one controllers can talk to another, This google group thread,, discusses 5 ways controllers can talk to each other.Controllers Mini-Challenge 9 Answer

1. Shared service.
2. Events.
3. Prudent pragmatic use of $root scope.
4. Watchers.
And a 5th - scope prototypical inheritance?

For a sake of simplicity we are going to show a possible answer to this challenge with Events, using $broadcasting and $on:
This is the view:

<div ng-controller="Ctrl1">
        <input type="text" ng-model="foo" />
        <input type="button" value="Talk to Ctrl2" ng-click="talkToCtrl2()" />
<div ng-controller="Ctrl2">{{foo}}</div>

And this is the javascript:

var myApp = angular.module('myApp', []);

myApp.controller('Ctrl1', myController);
myController.$inject = ['$scope', '$rootScope']

function myController($scope, $rootScope) {
    $ = "setted in ctrl1";
    $scope.talkToCtrl2 = function () {
		$rootScope.$broadcast('emitedFromController1', $;

myApp.controller('Ctrl2', myController2);
myController2.$inject = ['$scope']

function myController2($scope) {
    $ = "setted in ctrl2";
     $scope.$on('emitedFromController1', function(event, args) {
     	$ = args;


In the talkToCtrl2 function we can implement $rootScope.$broadcast('emitedFromController1', $; and then in the second controller we can implement:
$scope.$on('emitedFromController1', function(event, args) {
$ = args;

You can see a working example in this jsFiddle:

If you have a solution for this challenge, different from the proposed solution on this post, don't be shy and share it with us 🙂