AngularJS - Communication Between Controllers
This is an example of how to use a custom service to facilitate communicate between multiple controllers using $rootscope as an event bus.
HTML
<script src="http://code.angularjs.org/angular-1.0.0rc9.js"></script>
<div ng-controller="ControllerZero">
<input ng-model="message">
<button ng-click="handleClick(message);">LOG</button>
<div ng-controller="ControllerOne">
<input ng-model="message2" >
<button ng-click="handleClick();">LOG 2</button>
</div>
</div>
JavaScript
var myModule = angular.module('myModule', []);
function ControllerZero($scope) {
$scope.handleClick = function(msg) {
$scope.$emit('handleChild', {message : msg});
};
$scope.$on('updateParent', function(event, args) {
$scope.message = 'ZERO: ' + args.message;
});
}
function ControllerOne($scope) {
$scope.$on('handleChild', function(event, args) {
$scope.message2 = 'ONE: ' + args.message;
});
$scope.handleClick = function() {
$scope.$emit('updateParent', {message: $scope.message2});
};
}
ControllerZero.$inject = ['$scope'];
ControllerOne.$inject = ['$scope'];