I am using Angularjs ng-include to include a component, login.html, to the index.html within a js, index.js, file which works with that component.
Here is my index code:
<body cz-shortcut-listen="true">
<!-- Nav Bar -->
<div ng-include="'./partials/template/nav.html'"></div>
<!-- Page Content -->
<div ng-view>
</div>
<div ng-include="'./partials/template/login.html'"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="js/index.js"></script>
<!-- Bootstrap.js, Jquery plugins and Custom JS code -->
<script src="js/vendor/bootstrap.min.js"></script>
<script src="js/app.js"></script>
<script src="js/plugins.js"></script>
<!-- Angularjs refernces -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://code.angularjs.org/1.3.16/angular-route.min.js"></script>
<!-- Custome controller -->
<script type="text/javascript" src="./controller/mycontroller.js"></script>
<!-- Google Maps API + Gmaps Plugin, must be loaded in the page you would like to use maps (Remove 'http:' if you have SSL) -->
<!-- // <script src="http://maps.google.com/maps/api/js?sensor=true"></script>
<script src="js/helpers/gmaps.min.js"></script>
<!-- Load and execute javascript code used only in this page
<script src="js/pages/index.js"></script>
<script>$(function(){ Index.init(); });</script>
<script src="js/ckeditor/ckeditor.js"></script>-->
The js file for login is js/pages/index.js.
Unfortunately, it doesn't work as I expected. Anyways, when I move the codes of login.html to index.html file, it works correctly. I think it is caused by the js file is already loaded before the code of login.html since angularjs includes. If anyone know how to solve it, please help me. Thank you in advance.