title: AngularJS 1.5 - How to Set Two Way Bindings on Component
body: <p>Directives in Angular 1.X are set to have two way binding by default.  Components have isolated scopes by default.  I have a view that looks like:</p>
  
  <pre><code>&lt;div class="my-view"&gt;
      {{controllerVariable}}
  &lt;/div&gt;
  </code></pre>
  
  <p>If I have the above set up as a directive, the <code>controllerVariable</code> loads correctly in the following situation:</p>
  
  <pre><code>&lt;div ng-controller="myController"&gt;
      &lt;my-view&gt;&lt;/my-view&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>But if I have it set up as a component using the following:</p>
  
  <pre><code>myApp.component('myView', {
      templateUrl: '/path/to/view',
      bindings: '='
  });
  </code></pre>
  
  <p>then the variable value isn't displayed.  I have tried adding <code>$ctrl</code> to the variable:</p>
  
  <pre><code>&lt;div class="my-view"&gt;
      {{$ctrl.controllerVariable}}
  &lt;/div&gt;
  </code></pre>
  
  <p>but this doesn't display the value either.</p>
  
  <p>What am I missing here?</p>