title: Why are my component bindings undefined in its controller?
body: <p>I'm writing a simple angular component. I'm passing a parameter as a binding and display its value on the screen. All works fine: I can see the parameter being displayed on the screen.</p>
  
  <p>Component:</p>
  
  <pre><code>var app = angular.module("test", []);
  app.component("test", {
    bindings: {
      "contactId": "&lt;"
    },
    controllerAs: "model",
    controller: () =&gt; {
      //output: 'contact id from controller: undefined'
      console.log(`contact id from controller: ${this.contactId}`);
    },
    template: "&lt;div&gt;Contact id from view: {{model.contactId}}&lt;/div&gt;"
  });
  </code></pre>
  
  <p>Html:</p>
  
  <pre><code>&lt;test contact-id="8"&gt;&lt;/test&gt;
  </code></pre>
  
  <p>However, when I try to access the binding from within the controller (see the console.log), the binding value is <code>undefined</code>. I don't understand how it can be available in the view, but not in the controller.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Here's a <a href="https://plnkr.co/edit/0GUoNqLRyygeRlqItSMV?p=preview" rel="noreferrer">plnkr</a> illustrating the problem.</p>