title: Pass parameter to Angularjs controller function from directive
body: <p>I have a AngularJs directive that creates a property and callback function on its isolated scope:</p>
  
  <pre><code>.directive('testButton', [function () {
    return {
      restrict: 'A',
      controller: 'TestDirectiveController as vmDirective',
      scope: {     
          myCallBack:'&amp;myCallBack',
          myVariable: '=myVariable'
      },
      template: function (element, attrs) {
          return '&lt;button data-ng-click="vmDirective.onButtonClicked(2)"&gt;Set myVariable = 2&lt;/button&gt;';
      }
  };}])
  </code></pre>
  
  <p>In the directive a button gets clicked and it executes the <code>onButtonClicked</code> function. This then sets a scope variable and calls the <code>$scope.myCallBack</code> function.</p>
  
  <p>The callBack function gets executed and does the following:
  <code>console.log($scope.linkedVariable);</code></p>
  
  <p>The problem is the <code>$scope.linkedVariable</code> has not yet been updated and at that stage the <code>$scope.linkedVariable</code> is still the previous value.</p>
  
  <p>When I wrap the above code in a <code>setTimeout</code> the correct value is retrieved: <code>setTimeout(function(){console.log($scope.linkedVariable)}, 2000);</code></p>
  
  <p><strong>My Question</strong> is, how to properly pass the value to the <code>onCallBack</code> function.</p>
  
  <p>Please see full code example below:</p>
  
  <pre><code>   angular.module('application',[])
  
     .directive('testButton', [function () {
        return {
           restrict: 'A',
           controller: 'TestDirectiveController as vmDirective',
           scope: {     
                myCallBack:'&amp;myCallBack',
                myVariable: '=myVariable'
           },
           template: function (element, attrs) {
              return '&lt;button data-ng-click="vmDirective.onButtonClicked(2)"&gt;Set myVariable = 2&lt;/button&gt;';
           }
         };
      }])
  
    .controller("TestDirectiveController", ['$scope', function($scope){
         var self = this;
         self.onButtonClicked = function(value){
            $scope.myVariable = value;
            $scope.myCallBack();
         };
     }])
  
    .controller("TestController", ['$scope', function($scope){
        var self = this;
        $scope.linkedVariable = null;
  
        self.onCallBack = function(){
        console.log($scope.linkedVariable);
        setTimeout(function(){console.log($scope.linkedVariable)}, 2000);
      };
   }])
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div data-ng-controller="TestController as vm"&gt;
     &lt;div data-test-button="" data-my-call-back="vm.onCallBack()" data-my-variable="linkedVariable"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>jsfiddle: <a href="http://jsfiddle.net/ff5ck0da/1/" rel="nofollow">http://jsfiddle.net/ff5ck0da/1/</a></p>