Cannot bind to controller without identifier for directive + angularjs

I have a state router as such:

$stateProvider
  .state('home', {
    url: '/',
    templateUrl: 'spa/layouts/home.html',
    controller: 'HomeController',
    controllerAs: 'ctrl'
  });

In my home.html template I have:

<div class="row main-body">
  <aside class="col-md-2 sidebarNav">
    <div>...</div>
  </aside>

  <section class="col-md-10 main-container">
    <div>..</div>

    <my-list list-items={{ ctrl.listItems }}></my-list>
  </section>
</div>

In the directive my-list I have the following:

var templateUrl = 'spa/components/classList/classList.html';

angular
  .module('directives')
  .directive('myList', component);

function component() {
  return {
    templateUrl: templateUrl,
    controller: classListDir,
    contollerAs: '$ctrl',
    scope: {
      listItems: '@'
    },
    bindToController: true,
  };
}

classListDir.$inject = ['$scope'];

function classListDir($scope) {
  var $ctrl = this;
  console.log($ctrl);
}

I have read and re-read https://docs.angularjs.org/error/$compile/noident?p0=myList. I think my case deals with the second

//OKAY, because the directive uses the controllerAs property to override

// the controller identifier.

I still keep getting the error message. I don't understand the binding with identifier error. Can someone please explain this.