Angular does not recognize the dynamically loaded page in Extjs

Question

I have a SPA in Extjs system. I have also included angular and the necessary modules which i want to use on a page (external html referred in a panel of extjs).

Angular is defined in and working everywhere except in newly loaded page.The problem is that i have to (re)load angular on each page-load in order to get my page recognized by angular. If i load it each time, everythink works.

How can i ensure that my dynamically page is recognized automatically by angular?

My html:

<div ng-controller="MainCtrl">
     {{3+3}} and {{n}} <br>
</div>

Answer 1

angular.bootstrap() was the solution.

Things you have to care about are:

• you should nowhere use ng-app
• you should include jquery explicitly

• you can put the bootstrap in a panel's afterrender like:

  listeners : { 'afterrender' : { fn : function (panel, par2, par3) { angular.bootstrap($('#idOfYourAngularCode'), ['A']); }, scope : this } }

• If you want to use an external html, you can define your "bootstrap" also in your html file (by using a script tag). But if you use html inline in the panel (like me), this is the most appropriate way.