<!doctype html>
<html>
<head>
<link rel="stylesheet" href="app.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.8.0/angular.min.js"></script>
<script>
var app = angular.module('app', []);
app.controller("firstCtrl", function ($scope) {
$scope.handleClick = function (msg) {
$scope.$broadcast('eventName', { message: msg });
};
});
app.controller("secondCtrl", function ($scope) {
$scope.$on('eventName', function (event, args) {
$scope.message = args.message;
});
});
</script>
</head>
<body ng-app="app">
<div ng-controller="firstCtrl">
<h1>Parent Controller</h1>
<input ng-model="msg">
<button ng-click="handleClick(msg);">Emit</button>
<br/><br/>
<div ng-controller="secondCtrl">
<h1>Child Controller</h1>
<p>Emit Message : {{message ? message : "none"}}</p>
</div>
</div>
</body>
</html>
div {
border:2px solid rgb(0, 83, 238);
padding:5px;
}