JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.3.11/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.15/angular-ui-router.min.js"></script>
<body ng-app="myApp">
    <div ng-controller="MyCtrl">
        <div my-dir></div>
    </div>
    <div ui-view="ext"></div>
</body>

CSS

.ext {
    border: 2px solid red;
    padding: 10px;
}
pre {
    background: #ddd;
    border: 1px solid silver;
    padding: 5px;
    margin: 15px auto;
}

JavaScript

console.clear();

angular.module("myApp", ["ui.router"])
.config(["$stateProvider", function($stateProvider) {
	$stateProvider.state("ext", {
    	url: "/ext/:scopeId",
        views: {
        	ext: {
            	controller: "ExtCtrl",
                template: '<div class="ext"><p>This scope has $id = {{$id}}</p><button ng-repeat="i in [0, 1, 2, 3]" type="button" ng-click="choose($index)">{{$index}}</button><p>Emitting event <strong>"myEvent"</strong></p></div>'
            }
        }
    });
}])
.controller("MyCtrl", ["$scope", function($scope) {
    $scope.$root.$on("myEvent", function(e, data) {
    	$scope.$broadcast("myEvent:" + data.scopeId, data);
    });
}])
.controller("ExtCtrl", ["$scope", "$stateParams", function($scope, $stateParams) {
    $scope.choose = function(index) {
    	$scope.$emit("myEvent", {scopeId: $stateParams.scopeId, index: index});
    };
}])
.directive("myDir", ["$state", function($state) {
    return {
        restrict: "EA",
        template: '<div><p>This scope has $id = {{$id}}</p><p>Listening for event <strong>"{{ev}}"</strong></p><button type="button" ng-click="fetch()">Click me</button><pre>{{data}}</pre></div>',
        link: function(scope, element, attrs) {
            scope.ev = "myEvent:" + scope.$id;
            scope.data = "Button value should go here";
        	scope.$on(scope.ev, function(e, data) {
        		scope.data = data.index;
            });
            scope.fetch = function() {
                $state.go("ext", {scopeId: scope.$id});
            };
        }
    };
}]);