var myApp = angular.module('myApp', []);
myApp.controller('Ctrl1', myController);
myController.$inject = ['$scope', '$rootScope']
function myController($scope, $rootScope) {
$scope.foo = "setted in ctrl1";
$scope.talkToCtrl2 = function () {
$rootScope.$broadcast('emitedFromController1', $scope.foo);
}
};
myApp.controller('Ctrl2', myController2);
myController2.$inject = ['$scope']
function myController2($scope) {
$scope.foo = "setted in ctrl2";
$scope.$on('emitedFromController1', function(event, args) {
$scope.foo = args;
});
};
<div>
<div ng-controller="Ctrl1">
<input type="text" ng-model="foo" />
<input type="button" value="Talk to Ctrl2" ng-click="talkToCtrl2()" />
</div>
<div ng-controller="Ctrl2">{{foo}}</div>
</div>
External resources loaded into this fiddle: