Component binding not working properly

[ghost]

This won't work with current build.

Home template:

<navbar></navbar>
<header>
  <hero value="value"></hero>  <!-- set value -->
</header>
<main>
  <div>
    <h1>Found in {{ $ctrl.name }}.html</h1>
  </div>
</main>

Hero component:

import template from './hero.html';
import controller from './hero.controller';
import './hero.scss';

let heroComponent = {
  restrict: 'E',
  bindings: {
    value: '@'      // bind value
  },
  template,
  controller
};

export default heroComponent;

Hero controller

class HeroController {
  constructor($timeout) {
    'ngInject';
    this.name = 'hero';
    console.log(this.value);  // undefined
  }
}

export default HeroController;

However delaying the output works:

class HeroController {
  constructor($timeout) {
    'ngInject';
    this.name = 'hero';
    $timeout(() => console.log(this.value), 1000);  // 'value'
  }
}

export default HeroController;