JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/font-awesome/3.0/css/font-awesome.css">
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.2.2/css/bootstrap.no-icons.min.css">
<script type="text/ng-template" id="debug-bar.html">
<div>
    <form class="form-inline">
        <input type="text" class="input-medium" ng-model="myText"/>
        <button class="btn btn-primary" ng-click="broadcastEvent()">Broadcast</button>
        <button class="btn btn-primary" ng-click="emitEvent()">Emit</button>
    </form>
    <div ng-transclude></div>
</div>
</script>

<div class="container-fluid" ng-controller="parentController">
    <debug-bar>
        <div ng-controller="childController">
            <debug-bar>
                <div ng-controller="oneMoreChildController">
                    <debug-bar></debug-bar>
                </div>
            </debug-bar>
        </div>
        <div ng-controller="secondLevelChild">
            <debug-bar>
                <div ng-controller="secondLevelInnerChild">
                    <debug-bar></debug-bar>
                </div>
            </debug-bar>
        </div>
    </debug-bar>
</div>

CSS

div[ng-controller]{
    padding-left: 50px;
}

div[ng-controller]:first-child{
    padding:5px;
}

JavaScript

/*globals angular*/
/*globals console*/
(function () {
    "use strict";
    var angModule = angular.module('components', []);

    function createController(myText) {
        return function ($scope) {
            $scope.myText = myText;
            $scope.counter = 0;

            $scope.$on("event", function (event) {
                console.log("Event received in:" + $scope.myText + " from Sender:" + event.targetScope.myText);
            });

            $scope.broadcastEvent = function () {
                $scope.$broadcast("event");
                console.log("Sent event from:" + $scope.myText);
            };

            $scope.emitEvent = function () {
                $scope.$emit("event", $scope.myText);
                console.log("Sent event from:" + $scope.myText);
            };
        };
    }

    angModule.controller("parentController", createController("In parent"));

    angModule.controller("childController", createController("in FirstChild"));

    angModule.controller("oneMoreChildController", createController("in oneMoreChildController"));
    angModule.controller("secondLevelChild", createController("in secondLevelChild"));
    angModule.controller("secondLevelInnerChild", createController("in secondLevelChild 's Inner Child"));

    angModule.directive('debugBar', function () {
        return {
            restrict: 'E',
            templateUrl: 'debug-bar.html',
            transclude: true,
            replace: true
        };
    });
}());