JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.0/css/bootstrap-combined.min.css">
<html ng-app="app">
    <body ng-controller="main">
        <popdown></popdown>
        <p>From parent controller</p>
        <a class="btn" ng-click="success('I am a success!')">Succeed</a>
        <a class="btn" ng-click="error('Alas, I am a failure!')">Fail</a>
        
        
        <br><br><br>
            <p>From child1 controller</p>
        <div ng-controller="child1">
            <a class="btn" ng-click="successChild1('I am a success from child 1!')">Succeed</a>
            <a class="btn" ng-click="errorChild1('Alas, I am a failure from child 1!')">Fail</a>
        </div>
        
            <br><br><br>
            <p>From child2 controller</p>
        <div ng-controller="child2">
            <a class="btn" ng-click="successChild2('I am a success from child 2!')">Succeed</a>
            <a class="btn" ng-click="errorChild2('Alas, I am a failure from child 2!')">Fail</a>
        </div>
    </body>
</html>

CSS

body { padding: 40px; }

JavaScript

var PopdownModule = angular.module('Popdown', []);

PopdownModule.directive('popdown', function() {
    return {
        restrict: 'E',
        scope: {},
        replace: true,
        controller: function($scope) {
            $scope.show = false;
            $scope.status = null;
            $scope.message = null;
            
            $scope.$on('success', function(event, msg) {
                $scope.status = 'success';
                $scope.message = msg;
                $scope.toggleDisplay();
            });

            $scope.$on('error', function(event, msg) {
                $scope.status = 'error';
                $scope.message = msg;
                $scope.toggleDisplay();
            });

            $scope.hide = function() {
                $scope.show = false;
                $scope.status = null;
                $scope.message = null;
            };
            
            $scope.toggleDisplay = function toggledisplay() {
                $scope.show = !!($scope.status && $scope.message);               
            }
        },
        template: '<div class="alert alert-{{status}}" ng-show="show">' +
                  '  <button type="button" class="close" ng-click="hide()">&times;</button>' +
                  '  {{message}}' +
                  '</div>'
    };
});

var app = angular.module('app', ['Popdown']);

app.controller('main', function($scope) {
    $scope.success = function(msg) { $scope.$broadcast('success', msg); };
    $scope.error   = function(msg) { $scope.$broadcast('error', msg); };
    
    $scope.$on('successCh1', function (event, data) {
	    console.log(data); // 'Some data'
	    $scope.$broadcast('success', data);
	  });
});

app.controller('child1', function($scope) {
    $scope.successChild1 = function(msg) { 
        //$scope.$broadcast('success', msg);
        $scope.$emit('successCh1', 'Some data');
    };
    $scope.errorChild1   = function(msg) { $scope.$broadcast('error', msg); };
});

app.controller('child2',...