title: Angular component expression binding without template
body: <p>I'm trying to output my scope data from my component, but having a hard time figuring out how to do it without a local template.</p>
  
  <p>For different reasons I need to have the markup ind the HTML file and not being parsed in with the js load</p>
  
  <p>This is the dummy code so far: (codepen: <a href="http://codepen.io/anon/pen/qNBBRN" rel="nofollow">http://codepen.io/anon/pen/qNBBRN</a>)</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;comp&gt;
    {{ $ctrl.testing }}
  &lt;/comp&gt;
  </code></pre>
  
  <p>Non-working JS code:    </p>
  
  <pre><code>angular
        .module('Test', [])
        .component('comp', {
          controller: myCtrl,
        });
  
  function myCtrl() {
    var model = this;
    model.testing = '123';
  }
  
  document.addEventListener('DOMContentLoaded', function() {
    angular.bootstrap(document, ['Test']);
  });
  </code></pre>
  
  <p>And this is what I want to avoid even though it works:</p>
  
  <pre><code>angular
    .module('Test', [])
    .component('comp', {
      controller: myCtrl,
      template: '{{ $ctrl.testing }}',
    });
  
  function myCtrl() {
    var model = this;
    model.testing = '123';
  }
  
  document.addEventListener('DOMContentLoaded', function() {
    angular.bootstrap(document, ['Test']);
  });
  </code></pre>