Angular directives communication

example via rootScope

HTML

<div ng-controller="ctrl">
     <my-directive list="directive1"></my-directive>
    <my-directive list="directive2"></my-directive>
    <my-directive list="directive3"></my-directive>
    <my-directive list="directive4"></my-directive>
    
</div>

CSS

.customContainer {
    min-width: 40px;
    min-height: 40px;
    background-color: yellow;
}

JavaScript

angular.module('app', []);
angular.module('app').controller('ctrl', function ($scope, $element, $rootScope, $compile) {
});
angular.module('app').directive('myDirective', function ($rootScope) {
    return {
        restrict: 'AE',
        scope: {
            list: '@'
        },
        template: '<div class="blah">{{list}} <button ng-click="toggleOpen()">{{isOpen}}</button></div>',
        link: function (scope, elem, attrs) {
            scope.isOpen = false;
            scope.$on('openChanged', function(event, open){
                scope.isOpen = open;
            });
            scope.toggleOpen = function(){
                var wasOpen = scope.isOpen;
                scope.$broadcast('openChanged', false);
                scope.isOpen = !wasOpen;
            }
        }
    }
});
angular.bootstrap(document, ['app']);