Learning Angular: Access directive scope variables from directive controllers and vice versa

var app = angular.module('plunker', []);

app.directive('myDirective', function(){
  return {
    restrict: 'E',
    template: [
        '<b>From directive scope:</b> {{ directivevariable }}<br/>',
        '<b>From directive controller:</b> {{ vm.controllerVariable }}<br/>',
        '<b>Adapted by directive controller:</b> {{ vm.controllerAdapted }}'
      ].join(''),
    scope: {
      directivevariable: '='
    },
    controller: function($scope){
      var vm = this;
      vm.controllerVariable = 'Hi, I am from the controller';
      vm.controllerAdapted = $scope.directivevariable + '(ctrl adapted)';
    },
    controllerAs: 'vm'
  }
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.3.x" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.7/angular.js" data-semver="1.3.7"></script>
    <script src="app.js"></script>
  </head>

  <body ng-init="dirMessage = 'Hi there from the directive'">
    <my-directive directivevariable="dirMessage"></my-directive>
  </body>

</html>

/* Put your css in here */