angularjs - ビューでバインドされた値が更新されない

Question

指令

angular.module('myapp')
    .directive('hcComponentBlocker', function () {
        return {
            templateUrl: 'views/hccomponentblocker.html',
            priority: 1005,
            restrict: 'E',
            replace: false,
            scope: {
                animation: '@'
            },
            controller: 'ComponentBlockerCtrl',
            controllerAs: 'componentBlocker',
            bindToController: true
        };
    });

そのテンプレート:

<div class="component-blocker hc-ztop1002" ng-if="!componentBlocker.thisComponentIsLoaded">
    <!-- changed the following line from {{componentBlocker.animation}} -->
    <img src="{{componentBlocker.getLoadState()}}"/>
</div>

コントローラ：

angular.module('myapp')
    .controller('ComponentBlockerCtrl', function ($scope, HC_EVENTS) {
        var ctrl = this;
        ctrl.thisComponentIsLoaded = false;
        $scope.$on(HC_EVENTS.componentLoaded, function () {
            ctrl.thisComponentIsLoaded = true;
            console.log('component is loaded = ' + ctrl.thisComponentIsLoaded);
        });
        // begin added code
        ctrl.getLoadState = function() {
            return ctrl.thisComponentIsLoaded;
        };
        // end added code
    });

ディレクティブはによって呼び出されます

<hc-component-blocker animation="/images/spinner_black_16.gif"></hc-component-blocker>

問題：

イベントは、HC_EVENTS.componentLoadedを含むビューのコントローラーによって発生します<hc-component-blocker animation="/images/spinner_black_16.gif"></hc-component-blocker>。これは、次のコード行で行います。 $scope.$broadcast(HC_EVENTS.componentLoaded);

コンソールに「コンポーネントがロードされている= true」と表示されるため、これが機能していることはわかっています

ただし、ビューは何も更新されません。ng-if="!componentBlocker.thisComponentIsLoaded"要素全体を削除する必要がありますが、そのまま残ります。また、{{componentBlocker.thisComponentIsLoaded}}「false」を表示し続けます。

ディレクティブのテンプレートが の更新された値で更新されないのはなぜcomponentBlocker.thisComponentIsLoadedですか?

ETA: 式で適切に動作するようです。値が機能しないのに、式が機能する理由を理解したいと思います。それは設計によるものですか？