title: Angular directive no data in link function's $scope
body: <p>I have this directive which sets the <code>test</code> variable to <code>abc</code> in the <code>init</code> function of the controller. However in my link function the <code>test</code> variable is undefined.</p>
  
  <pre><code>angular.module('module')
         .directive('directive', myDirective);
  
  function myDirective() {
    var directive = {
      link: link,
      bindToController: true,
      controllerAs: 'dt',
      controller: Controller,
      ...
    };
  
    return directive;
  
    function link(scope, element, attrs) {
      ...
      scope.dt.initialize = function() {
        initializeDirective(scope, element, attrs);
      }
    }
  
    function initializeDirective(scope, element, attrs) {
      // not able to get scope.dt.test, it's undefined
      console.log(scope.dt.test); // undefined
    }
  }
  
  function Controller() {
    var vm = this;
    vm.test = '123';
    vm.create = function(data, config) {
      vm.test = 'abc';
      vm.initialize();
    }
    ...
  }
  </code></pre>
  
  <p>And in another JavaScript file code that creates the directive. It is calling the <code>create</code> function</p>
  
  <pre><code>// JavaScript in another file that inits the directive
  var directive = vm.get(...);
  vm.create(vm.data, config);
  </code></pre>
  
  <p>From my understanding, <code>scope.dt</code> should be automatically injected to the link function because of the <code>controllerAs</code>, which it is but <code>scope.dt.test</code> does not exist.</p>
  
  <p><strong>EDIT</strong></p>
  
  <p>I put the <code>test</code> variable outside the <code>create</code> function and set it to <code>123</code>. The <code>console.log</code> now logs <code>123</code>, which is not what I want (I want <code>abc</code>).</p>