Nested Directives with events

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<div my-panel>
    
    <button>open/close</button>
    
    <div react-to-panel-open-close>Go Red when outer panel opened</div>
    <div react-to-panel-open-close>Go Red when outer panel opened</div>
    
    <div my-panel>
        
        <button>open/close</button>
    
        <div react-to-panel-open-close>Go Red only  when inner panel opened</div>
        <div react-to-panel-open-close>Go Red only when inner panel opened</div> 
        
    </div>

</div>

SCSS

*, *:before, *:after {-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;}

HTML{
    font-family: "Avant Garde", Avantgarde, "Century Gothic", CenturyGothic, "AppleGothic", sans-serif;
}


[my-panel]{
    padding: 10px;
    margin: 10px;
    border: solid 1px black;
    
    BUTTON{
        margin-bottom: 10px;
    }
}

JavaScript

angular.$externalBroadcast = function (element, event, data) {
    var scope = element.scope();
    scope.$apply(function () {
        scope.$broadcast(event, data);
    });
};

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

app.controller('MainCtrl', function ($scope) {  
    $scope.mainMenuOpen = true;
})

.directive('myPanel', function () {
    return {
        restrict: 'EA',
        scope: {
        	isOpen: '=?'
        },
        link: function($scope, $element, $attrs){                    
            $element.find('> BUTTON').bind('click', function(){                
        		$scope.isOpen = !$scope.isOpen;                
                if($scope.isOpen){
                    angular.$externalBroadcast($element, 'panelOpened');
                }                
        	});        
        }    
    };
})

.directive('reactToPanelOpenClose', function () {
    return {
        restrict: 'EA',
        scope: {},
        link: function($scope, $element, $attrs){       
            $scope.$on('panelOpened', function(){                
                alert("clicked");                
                $element.css({'background-color':'red'});
            });          
        }    
    };
});