var app = angular.module('plunker', []);
app.controller('Parent', function($scope) {
$scope.message="";
$scope.emitedmessage="";
$scope.clickevent=function(){
$scope.$broadcast('transfer',{message:$scope.message});
}
$scope.$on('transferUp',function(event,data){
console.log('on working');
$scope.emitedmessage=data.message;
});
});
app.controller('Child',function($scope){
$scope.message="";
$scope.broadcastmessage=""
$scope.$on('transfer',function(event,data){
$scope.broadcastmessage=data.message;
});
$scope.clickevent=function(){
$scope.$emit('transferUp',{message:$scope.message});
}
});
<!DOCTYPE html>
<html ng-app="plunker">
<head>
<meta charset="utf-8" />
<title>AngularJS Plunker</title>
<script>document.write('<base href="' + document.location + '" />');</script>
<link rel="stylesheet" href="style.css" />
<script data-require="angular.js@1.4.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.7/angular.js" data-semver="1.4.7"></script>
<script src="app.js"></script>
</head>
<body ng-controller="Parent">
<h3>Parent Controller</h3>
<div>
<p>Emitted message : {{emitedmessage}}</p>
<input type="text" ng-model="message" placeholder="Text to Broadcast"/>
<button ng-click="clickevent()">Broadcast</button>
</div>
<div ng-controller="Child">
<h3>Child controller</h3>
<p>Broadcast message : {{broadcastmessage}}</p>
<input type="text" ng-model="message" placeholder="Text to Emit"/>
<button ng-click="clickevent()">Emit</button>
</div>
</body>
</html>
/* Put your css in here */