AngularJs component Binding is not rendered in template

Question

I have the following component,

class ModifyServiceController implements ng.IComponentController {
  public value: number;
  public ngModel: ng.INgModelController;
  public a: string;

  public $onInit() {
    window.console.log(this.a);
  }
}

export class ModifyService implements ng.IComponentOptions {
  public controller = ModifyServiceController;
  public template = require('./ModifyService.html');
  public bindings = {
    a: '<',
  };
} 

And I have a template just to display that string a..

<div>Value is: {{a}}</div> 

The console.log does not provide any error, and I get the value displayed, but in the template, it is not rendered (I see only: Value is:).

I am passing the value in the parent component:

<modify-service a="'blabla'"></modify-service>

Am I missing something? I am totally new to AngularJs.

Answer 1

Components instantiate their controllers with the default name $ctrl:

<div>Value is: {{$ctrl.a}}</div>