title: AngularJS component: using binding object in controller
body: <p>I use Angular component (first example from <a href="https://docs.angularjs.org/guide/component" rel="nofollow noreferrer">this</a>). When I binding object in component, it is accessible in template, but isn't in controller.</p>
  
  <p>js:</p>
  
  <pre><code>function HeroDetailController() {
    console.log("Here I want to use hero.name: ");
    console.log(hero.name); // I want to use binding object in controller, but doesn't work
  }
  
  angular.module('heroApp').component('heroDetail', {
    templateUrl: 'heroDetail.html',
    controller: HeroDetailController,
    controllerAs: 'ctrl',
    bindings: {
      hero: '='
    }
  });
  </code></pre>
  
  <p>html:</p>
  
  <pre><code>&lt;hero-detail hero="ctrl.hero"&gt;&lt;/hero-detail&gt;
  </code></pre>
  
  <p>template html (here it works):</p>
  
  <pre><code>&lt;span&gt;Name: {{ctrl.hero.name}}&lt;/span&gt;
  </code></pre>
  
  <p>Error:</p>
  
  <blockquote>
    <p>ReferenceError: hero is not defined</p>
  </blockquote>
  
  <p>Plunker: <a href="https://plnkr.co/edit/U9CJLs6jgrlsZH6tUdr0" rel="nofollow noreferrer">https://plnkr.co/edit/U9CJLs6jgrlsZH6tUdr0</a> </p>