How Can Controllers Communicate with Each Other in AngularJS?

Inter-Controller Communication in AngularJS

In AngularJS, it is possible for one controller to call another. There are several approaches to achieve this, each with its own advantages and use cases.

Dependency Injection

In the provided example, the HTML document uses the MessageCtrl controller to display a message. To pass data from another controller, you could create a service that mediates the communication.

<br>angular.module('myApp', []).<br>  service('DataService', function() {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">this.data = { date: new Date().toString() };

Copy after login

}).
controller('MessageCtrl', ['$scope', 'DataService', function($scope, DataService) {

$scope.message = DataService.data.date;

}]).
controller('DateCtrl', ['DataService', function(DataService) {

DataService.data.date = 'Custom date format';

}]);

In this scenario, MessageCtrl has access to the DataService, which is also used by DateCtrl to modify the date format. This ensures synchronized communication between the controllers.

Scope Events

Another method is to emit events on the scope. When an event is emitted, all controllers that have registered a listener for that event can respond.

<br>angular.module('myApp', []).<br>  controller('MessageCtrl', ['$scope', function($scope) {</p>
<div class="code" style="position:relative; padding:0px; margin:0px;"><pre class="brush:php;toolbar:false">$scope.$on('dateUpdated', function(event, newDate) {
  $scope.message = newDate;
});

Copy after login