AngularJS and Jquery: angular dosen't bind on

Question

Jquery is ignoring all Angular ng binds(ng-app,ng-controller,ng-bind..) on page change.They are working in index but when I navigate to other pages ng-s just aren't working.Is there a way to "rebind" angular when page dynamically changes?

in first html:

<section data-role="page" ng-app="aki" ng-controller="akicontroller">

<a href="sec.html"></a>

</section>

in second html ng-app and ng-controller are ignored:

<section data-role="page" ng-app="aki" ng-controller="akicontroller">

</section>

Pages are loaded via jquery in dom.

Thank you in advance.

Answer 1

If you are going to use jquery with angular, you should convert any plugin into a directive. The video below explains alot on how it is done.

https://www.youtube.com/watch?v=9Bu73oQQSio

This will ensure that your bindings update.

Answer 2

ng-app is used for designating the root of the app and should be placed in root elements of the page (html/body). If you do actually need >2 apps running in one html document then you must bootstrap them. Refer to the Angular documentation for ng-app: https://docs.angularjs.org/api/ng/directive/ngApp