title: Link/Compile a Polymer or Web Components template to Angularjs Scope
body: <p>I have a <a href="http://www.polymer-project.org/" rel="nofollow">Polymer</a> component (web component) and I have put an angular controller inside of it, like so:</p>
  
  <pre><code>&lt;polymer-element name="x-display"
    attributes="title body"&gt;
    &lt;template&gt;
      &lt;h2&gt;{{title}}&lt;/h2&gt;
      &lt;p&gt;{{body}}&lt;/p&gt;
      &lt;p ng-controller="XDisplayController" ng-bind="text"&gt;&lt;/p&gt;
    &lt;/template&gt;
    &lt;script&gt;
      Polymer('x-display', {
        title: "",
        body: ""
      });
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>The <code>&lt;x-display&gt;</code> is being placed on the page like this:</p>
  
  <pre><code>&lt;div ng-controller="PeopleController"&gt;
      &lt;h1&gt;People&lt;/h1&gt;
      &lt;input ng-model="query" type="text"&gt;
      &lt;x-display ng-repeat="p in people | filter:query" 
          title="{{ p.name }}" body="{{ p.body }}"&gt;&lt;/x-display&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>This is all pretty cool. With one exception it behaves exactly the same as you'd expect, placing a whole bunch of <code>&lt;x-display&gt;</code> tags, one for each person, and filling them with the correct values. I make the call to <code>Polymer</code> default the values to null so that the <code>{{ p.value }}</code> occurrences don't flash up but aside from that it's nice and simple.</p>
  
  <p>The problem is the nested <code>XDisplayController</code> never get's parsed by Angularjs, and so never becomes a real controller. If I defined it like this then:</p>
  
  <pre><code>function XDisplayController($scope) {
      $scope.text = "blah blah";
      console.log("this never gets printed");
  }
  </code></pre>
  
  <p>It is left sadly untouched.</p>
  
  <p>How would I go about making angularjs aware of the template and ideally how would I make it inherit the parent scope so it behaved exactly as if had been placed on the page as if by an angular directive?</p>
  
  <p>I suspect it might have something to do with <a href="http://docs.angularjs.org/api/ng.%24compile" rel="nofollow">$compile</a> but I can't get it to work.</p>
  
  <p>Oh, I should mention that Polymer has <a href="http://www.polymer-project.org/polymer.html#lifecyclemethods" rel="nofollow">lifecycle callbacks</a>, which would probably be the appropriate place to call whatever linking angularjs code.</p>
  
  <p>Edit: I tried CodeHater's code, changing element.contents() to element.context.impl and got the following error:</p>
  
  <pre><code>An attempt was made to reference a Node in a context where it does not exist.
  </code></pre>
  
  <p>I think this is to do with Shadow DOM and how the tags created by polymer have their own context.</p>