title: Angular inside of an Extjs Panel
body: <p>Disclaimer: it's not my choice to put angular inside of an Extjs panel. I have certain business needs that require this, so spare me the, "you shouldn't do this" answers. </p>
  
  <p>I'm writing a mobile webapp with extjs 6.0.1. For various reasons out of my control, I need to be able to use angular in my extjs app. My first attempt at this is to just display an Ext Panel and put angular markup in the html config, like this:</p>
  
  <pre><code>  this._angularPanel = Ext.create('Ext.Panel', {
      height: '100%',
      width: '100%',
      cls: 'angularPanel',
      html:
          '&lt;div ng-app=""&gt;'+
            '&lt;p class="angTest"&gt;Name : &lt;input type="text" ng-model="name"&gt;&lt;/p&gt;'+
            '&lt;h1&gt;Hello {{name}}&lt;/h1&gt;'+
          '&lt;/div&gt;'
    });
  </code></pre>
  
  <p>I also have included the script at the top of the page: </p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.3/angular.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>However, it is just parsing it like plain old HTML in my panel, so the result is this:</p>
  
  <p><a href="https://i.stack.imgur.com/4Tygi.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4Tygi.png" alt="enter image description here"></a></p>
  
  <p>I have also tried using a template like this:</p>
  
  <pre><code>  this._angularPanel = Ext.create('Ext.Panel', {
      height: '100%',
      width: '100%',
      cls: 'angularPanel',
      tpl: [
          '&lt;div ng-app=""&gt;'+
            '&lt;p class="angTest"&gt;Name : &lt;input type="text" ng-model="name"&gt;&lt;/p&gt;'+
            '&lt;h1&gt;Hello {{name}}&lt;/h1&gt;'+
          '&lt;/div&gt;'
          ],
      data: {}
    });
  </code></pre>
  
  <p>In this case the template thinks the name is an argument for the Ext template, which make sense since it's in the brackets, so the screen looks like this instead:</p>
  
  <p><a href="https://i.stack.imgur.com/VSk1Z.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/VSk1Z.png" alt="enter image description here"></a></p>
  
  <p>Any ideas?</p>
  
  <p>EDIT:</p>
  
  <p>Now also have tried bootstrapping it manually:</p>
  
  <pre><code>  this._angularPanel = Ext.create('Ext.Panel', {
      height: '100%',
      width: '100%',
      cls: 'angularPanel',
      html:
        '&lt;div ng-controller="MyController"&gt; '+
           'Hello {{greetMe}}! ' +
        '&lt;/div&gt; '+
        '&lt;script src="http://code.angularjs.org/snapshot/angular.js"&gt;&lt;/script&gt; '+
            '&lt;script&gt; '+
            'angular.module("myApp", []).controller("MyController", ["$scope", function ($scope) { '+
                  '$scope.greetMe = "World"; '+
                '}]); '+
  
            'angular.element(function() { '+
              'angular.bootstrap(document, ["myApp"]); '+
            '}); '+
        '&lt;/script&gt;'
    });
  </code></pre>
  
  <p>Still doesn't work. I get:</p>
  
  <p>Hello {{greetMe}}</p>
  
  <p>instead of:</p>
  
  <p>Hello World</p>