title: Not able to access directive variable from within controller
body: <p>I'm developing an application which has the following directive and controller:</p>
  <pre><code>function directive() {
    return {
      restrict: 'E',
      template: template,
      controller: 'MessageChatAppController',
      controllerAs: 'vm',
      scope: {},
      bindToController: {
        recipient: '=?'
      }
    };
  }
  
  function Controller(MessageChatAppService, UserFactory, $scope) {
    let vm = this;
  
    console.log(vm);
    console.log(vm.recipient);
    console.log($scope)
  
    vm.message = '';
  
    vm.sendMessage = _sendMessage;
  
    function _sendMessage() {
      MessageChatAppService.sendMessage(vm.message, UserFactory.model.email);
    }
  
    function _connectUser() {
      MessageChatAppService.connectUser(UserFactory.model.email);
    }
  
    _connectUser();
  }
  </code></pre>
  <p>When the following is executed:</p>
  <pre><code>console.log(vm);
  console.log(vm.recipient);
  console.log($scope)
  </code></pre>
  <p>It returns:
  <a href="https://drive.google.com/file/d/1UtWI5WKydF-Hdus_Kilj-A1DxAAG4duz/view?usp=sharing" rel="nofollow noreferrer">https://drive.google.com/file/d/1UtWI5WKydF-Hdus_Kilj-A1DxAAG4duz/view?usp=sharing</a></p>
  <p>As you can see the recipient object has data but of course I can't access by using <strong>vm.recipient</strong> because it's owned by the Controller. Searching the internet I found that the issue happens due to a delay in the controller initialization, a solution to this would be using $onInit, but as I never needed $onInit in order to make the controller access the directive variables, I don't want to use it. Is there any other way to make it work?</p>