title: bound value not updating in view
body: <p>the directive</p>
  
  <pre><code>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
          };
      });
  </code></pre>
  
  <p>that template:</p>
  
  <pre><code>&lt;div class="component-blocker hc-ztop1002" ng-if="!componentBlocker.thisComponentIsLoaded"&gt;
      &lt;!-- changed the following line from {{componentBlocker.animation}} --&gt;
      &lt;img src="{{componentBlocker.getLoadState()}}"/&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>controller:</p>
  
  <pre><code>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
      });
  </code></pre>
  
  <p>the directive is called by </p>
  
  <pre><code>&lt;hc-component-blocker animation="/images/spinner_black_16.gif"&gt;&lt;/hc-component-blocker&gt;
  </code></pre>
  
  <p>The problem:</p>
  
  <p>The <code>HC_EVENTS.componentLoaded</code> event is fired by the controller of a view that contains<code>&lt;hc-component-blocker animation="/images/spinner_black_16.gif"&gt;&lt;/hc-component-blocker&gt;</code>. It does this with this line of code:  <code>$scope.$broadcast(HC_EVENTS.componentLoaded);</code></p>
  
  <p>I know this is working because the console will tell me 'component is loaded = true'</p>
  
  <p>However, nothing in the view updates. <code>ng-if="!componentBlocker.thisComponentIsLoaded"</code> should remove the entire element, but it remains in place. In addition, <code>{{componentBlocker.thisComponentIsLoaded}}</code> continues to display "false." </p>
  
  <p>Why does the directive's template not update with the updated value of <code>componentBlocker.thisComponentIsLoaded</code>?</p>
  
  <p>ETA: it appears to work properly with the expression. I wish to understand why a value doesn't work but an expression does. Is that by design?</p>