Why directive does not receive broadcast message?
<p>I have two directives that communicate with each other. 
After <strong>krCanvasDirective</strong> is initialized it sends a broadcast notification <code>CanvasController.initialized</code>
Another directive <strong>krCanvasWidthControlDirective</strong> listens for this notification and when it receives it - it sends another broadcast notification back to first directive <code>canvas.change-width</code>. But for some unknown to me reason (initialization order?) <strong>krCanvasDirective</strong> does not receive it...</p>

<p><strong>krCanvasDirective.js.erb</strong></p>

<pre><code>//= depend_on_asset "canvas_directive.html.erb"

(function() {

    angular
        .module('catcher.widgets')
        .directive('krCanvas', canvasDirective);


    function canvasDirective() {
        return {
            restrict: 'EA',
            scope: {},
            replace: true,
            templateUrl: '&lt;%= asset_path("canvas_directive.html") %&gt;',
            controller: CanvasController,
            controllerAs: 'vm',
            link: function(scope, element, attrs) {
                var image = element.find('.preview-image');

                scope.$on('canvas.change-width', function(e, params) {                    
                    image.css({'width': params.newWidth + 'px'});
                });

            }
        }
    }

    CanvasController.$inject = ['$scope', '$rootScope',  '_'];
    function CanvasController($scope, $rootScope, _) {
        var vm = this;

        vm.canvas = {};

        activate();
        /////////////

        function activate() {
            console.log('CanvasController: activate');
            $rootScope.$broadcast('CanvasController.initialized');
        }

    }

})();
</code></pre>

<p><strong>krCanvasWidthControlDirective.js.erb</strong></p>

<pre><code>//= depend_on_asset "canvas_width_control_directive.html.erb"

(function() {

    angular
        .module('catcher.widgets')
        .directive('krCanvasWidthControl', canvasWidthControlDirective);


    function canvasWidthControlDirective() {
        return {
            restrict: 'EA',
            scope: {},
            replace: true,
            templateUrl: '&lt;%= asset_path("canvas_width_control_directive.html") %&gt;',
            controller: CanvasWidthControlController,
            controllerAs: 'vm'
        }
    }

    CanvasWidthControlController.$inject = ['$scope', '$rootScope',  '_'];
    function CanvasWidthControlController($scope, $rootScope, _) {
        var vm = this;

        vm.canvasWidth = 500;
        vm.changeCanvasWidth = changeCanvasWidth;

        activate();
        /////////////

        function registerWatchers() {
            $scope.$on('CanvasController.initialized', function() {                
                vm.changeCanvasWidth();
            });

            $scope.$watch('vm.canvasWidth', function(newValue, oldValue) {
                if (!angular.equals(newValue, oldValue)) {
                    // WHY IT WORKS? 
                    // krCanvasDirective successfully receives notification from the method below 
                    vm.changeCanvasWidth();
                }
            });
        }

        function activate() {
            console.log('CanvasWidthControlController: activate');
            registerWatchers();
        }

        function changeCanvasWidth() {
            $rootScope.$broadcast('canvas.change-width',
                                 { newWidth: vm.canvasWidth });
        }

    }

})();
</code></pre>