Accessing controller from compile function in directives

I have searched all over and the only thing I can come up with is that I don't understand something fundamental about how the compile function works.

Here is what I have

angular.module("app", [])
.directive("foo", function(){
  return {
    scope: {},
    controller: function() {
      this.someValue = 23;
    },
    contollerAs: "ctrl",
    compile: function(tElem, tAttrs) {
      tElem.html("<h1>Data:  {{ctrl.someValue}}</h1>");
    },
    template: '<h1>test</h1>'
  }
});

This displays: Data: and does not seem to see the "someValue" variable. However when I use scope instead of the controllerAs syntax, it works.

//this works fine
angular.module("app", [])
.directive("foo", function(){
  return {
    scope: {},
    controller: function($scope) {
      $scope.someValue = 23;
    },
    contollerAs: "ctrl",
    compile: function(tElem, tAttrs) {
      tElem.html("<h1>Data:  {{someValue}}</h1>");
    },
    template: '<h1>test</h1>'
  }
});

This displays: Data: 23

Is there something I am missing here? Am I even using compile correctly? Manual seems less then helpful.

Because there is a typo. It is controllerAs, not contollerAs.

It is recommended to use template function instead of compile. This makes upgrading to components easier in future, also saves from problems - compile in the directive above won't work correctly if there's no dummy <h1>test</h1> template.