JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.angularjs.org/1.6.1/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="MainCtrl as vm">
    From MainCtrl: {{ vm.name }}
    <foo-directive name="vm.name"></foo-directive>
  </div>
</div>

JavaScript

angular
  .module('app', []);

angular
  .module('app')
  .controller('MainCtrl', function() {
    this.name = 'Foobar';
  });

angular
  .module('app')
  .directive('fooDirective', function() {
    return {
      restrict: 'E',
      scope: {
        name: '='
      },
      bindToController: true,
      controller: function() {
        console.log(this.name); //<-- why does this not log "Foobar"?
      },
      controllerAs: 'vm',
      template: '<div>From directive: {{ vm.name }}</div>'
    };
  });