title: Running angular app inside shadow dom
body: <p>I am developing an application, where I've to load other angular(1.x) application inside current page (As per project requirement).  I am trying to achieve it using shadow DOM concept (This could be done using iframe, but I am looking for better approach). I've tried below code:</p>
  
  <pre><code> var templateUrl = "angular-app.html",
   templateReceivedCallback = function (response) {
        var templateHolder = $("#template-holder"),
            div = document.getElementById('template-holder'),
            shadowRoot = div.attachShadow({
                mode: 'open'
             });
         shadowRoot.innerHTML = response;
       };
   $.get(templateUrl, templateReceivedCallback);
  </code></pre>
  
  <p>I am expecting that the angular application should be loaded inside template holder element:</p>
  
  <pre><code> &lt;div id="template-holder"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>The other app is loading in the div which I mentioned, but expressions are not compiled as expected. Example - Angular app having variable this.greeting = "Welcome!" and I am expecting this:</p>
  
  <pre><code> Welcome!
  </code></pre>
  
  <p>But it rendered as:</p>
  
  <pre><code> {{greeting}}
  </code></pre>
  
  <p>Is there any better way to achieve this? If yes, please share running example with me.</p>
  
  <p>Thanks.</p>