AngularJS Example:
HTML
<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<body ng-app="myapp">
<div ng-controller="outer1">
<div ng-controller="inner1">
</div>
<div ng-controller="inner2">
</div>
</div>
<div ng-controller="outer2">
</div>
</body>
JavaScript
var app = angular.module("myapp", []);
app.controller("outer1", function($scope) {
$scope.$on("newmessage", function() {
console.log("outer1");
});
$scope.$broadcast("newmessage");
});
app.controller("inner1", function($scope) {
$scope.$on("newmessage", function() {
console.log("inner1");
});
});
app.controller("inner2", function($scope) {
$scope.$on("newmessage", function() {
console.log("inner2");
});
});
app.controller("outer2", function($scope) {
$scope.$on("newmessage", function() {
console.log("outer2");
});
});