title: Using AngularJS in a Polymer web component
body: <p>I would like to make a small Angular app from within a Polymer web component.</p>
  
  <p>I wrote a quick test to see if this is trivially possible:</p>
  
  <pre><code>&lt;link rel="import" href="../../bower_components/polymer/polymer.html"&gt;
  &lt;script type="text/javascript" src="../../bower_components/jquery/dist/jquery.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="../../bower_components/angular/angular.js"&gt;&lt;/script&gt;
  
  &lt;polymer-element name="test-component"&gt;
    &lt;template&gt;
      &lt;div ng-app="app"&gt;
        &lt;div ng-controller="AppCtrl"&gt;
          ... {{test}} ...
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/template&gt;
  
    &lt;script&gt;
      !function () {
        Polymer('test-component', {
          ready: function () {
            var app = angular.module('app', [])
            app.controller('AppCtrl', function ($scope) {
              $scope.test = 'testing';
            });
          }
        });
      }();
    &lt;/script&gt;
  &lt;/polymer-element&gt;
  </code></pre>
  
  <p>Unfortunately, this does not work.  The page displays <code>...  ...</code> instead of <code>... testing ...</code>.  No errors are shown in the console.</p>
  
  <p>I tried taking the Angular code out of the <code>ready</code> hook and above the Polymer function entirely.  A <code>console.log(angular, app)</code> in <code>ready</code> was returning the correct things, but yielded the same result as before.</p>
  
  <p>I also tried to put the Angular code inside the template at the very bottom, essentially treating the <code>&lt;template&gt;</code> tag like a <code>&lt;body&gt;</code> tag.  This also resulted in the same behavior.</p>
  
  <p>Is it possible to use Angular in a web component?  If possible, I would like to be able to use the encapsulation qualities (shadow DOM and such) of web components while still using AngularJS.  </p>