title: template function not interpolating component bindings
body: <p>I'm  using 1.5 components, I don't think that matters though.</p>
  
  <p>I'm trying to do a single <code>=</code> binding between a parent controller and a child directive isolate scope. The child isolate scope is interpolating the binding literally; instead of <code>vm.data</code> interpolating to the data I defined in the controller, it's coming out literally <code>vm.data</code> as a string.</p>
  
  <p>If I try one way binding with <code>@</code> then, again, the "interpolated" value results in <code>{{vm.data}}</code> literally.</p>
  
  <p>How can I get the string defined in the parent controller into the child component's template?</p>
  
  <pre><code>angular
    .module('app', [])
    .controller('Ctrl', function () {
      this.str = '&lt;0&gt;, blah, &lt;1&gt;';
    })
    .component('appComponent', {
      restrict: 'E',
      controller: 'Ctrl as vm',
      template: '&lt;div&gt;&lt;app-str appstr-data="{{vm.str}}"&gt;&lt;/app-str&gt;&lt;/div&gt;'
    })
    .component('appStr', {
      bindings: { appstrData: '@' },
      restrict: 'EA',
      template: function($element, $attrs) {
        console.log($attrs.appstrData)
        return '&lt;span&gt;'+$attrs.appstrData+'&lt;/span&gt;';
      }
    });
  </code></pre>
  
  <p><a href="https://plnkr.co/edit/VWVlhDbhP2uDRKtXJZdE?p=preview">https://plnkr.co/edit/VWVlhDbhP2uDRKtXJZdE?p=preview</a></p>