title: Angular - scope variable update in controller function call doesn't get reflected in directive html
body: <p>I've been playing around with angular trying to understand how it manages scopes, then I found that I couldn't update the variables in the directive using a function call.</p>
  
  <p>To illustrate the issue, here is my simple app:
  The idea is that when you click the toggle link, the menu should show up and when you click it again or somewhere else, the menu should disappear.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>angular.module('app', [])
    .controller('DemoController', ['$scope', function($scope) {
  
    }])
    .directive('dropdown', function() {
      return {
        restrict: 'E',
        transclude: true,
        controller: function($scope) {
          $scope.onBlur = function () {
            // this doesn't actually work
            $scope.showMenu = false;
          };
        },
      };
    });</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"&gt;&lt;/script&gt;
  &lt;body id="body" ng-app="app" ng-controller="DemoController"&gt;
    &lt;dropdown ng-transclude&gt;
      &lt;a href="#" ng-click="showMenu = !showMenu" ng-blur="onBlur()"&gt;Toggle&lt;/a&gt;
      &lt;menu ng-show="showMenu"&gt;
        &lt;div&gt;I'm&lt;/div&gt;
        &lt;div&gt;the drop-down&lt;/div&gt;
        &lt;div&gt;menu&lt;/div&gt;
      &lt;/menu&gt;
    &lt;/dropdown&gt;
  &lt;/body&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>Here's my plunker links:</p>
  
  <p>Non-working version:
  <a href="http://plnkr.co/edit/rfdt5FEoGAOX15RZUsKA?p=preview" rel="nofollow">http://plnkr.co/edit/rfdt5FEoGAOX15RZUsKA?p=preview</a></p>
  
  <p>Working version:
  <a href="http://plnkr.co/edit/xMANGDVa8n64OKK3gOgg?p=preview" rel="nofollow">http://plnkr.co/edit/xMANGDVa8n64OKK3gOgg?p=preview</a></p>
  
  <p>The difference between the working one and the other is that the working version simply uses <code>ng-blur="showMenu = false"</code> instead of calling the function. If I call <code>$scope.$apply()</code> inside the controller function, then I will get "$apply already in progress" exception. </p>
  
  <p>I guess I must be missing something here but I've no idea why right now. Thanks in advance.</p>