I am able to get the Angular Controller working on the index.html page, but its not loading on any of the other pages. My index page is :
<!DOCTYPE html>
<html ng-app="myPhonegapApp">
<head>
<script src="js/angular.min.js"></script>
<script src="js/my-angscript.js"></script>
</head>
<body>
<div class="views">
<div class="view view-main">
<div class="pages navbar-through toolbar-through">
<div data-page="index" class="page">
<div class="page-content">
<div class="content-block">
<a href="mypage1.html">My Page1</a> <br>
<a href="mypage2.html">My Page2</a> <br>
<div ng-controller="myAngController">
<p>The name is : {{name}}</p>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="lib/framework7/js/framework7.min.js"></script>
<script type="text/javascript" src="js/my-app.js"></script>
</body>
</html>
I linked mypage1.html from the index page and the code for mypage1.html is exactly same as index.html and only this part is changed: <div data-page="mypage1" class="page">
Now the my-angscript.js is:
var app = angular.module("myPhonegapApp", []);
app.controller("myAngController", function($scope){
$scope.name = "Johnny Doe";
});
The code works fine on the index page. But when I go to mypage1.html, it does not work. It only shows {{name}}. What am I doing wrong?
PhoneGap : v6.4.3
AngularJS: v1.6.1
