After researching my AngularJS application, I discovered that having 2 ng-app tags in the html file means only the first one will be executed.
In my code snippet below
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.1/angular.js">
</script>
<script>
var app = angular.module("MyApp", []);
app.controller('myCtrl', function($scope, $http) {
$http({
method : "GET",
url : "http://localhost:5050/get_time"
}).then(function successCallBack(response) {
$scope.jsonResponse = response.data;
}, function errorCallBack(response) {
$scope.jsonResponse = "failed"
});
angular.bootstrap(document.getElementById("App"), ['MyApp']);
});
</script>
<div ng-app = "MyApp" ng-controller="myCtrl">
<p>Response of JSON Below:</p>
<h1>{{jsonResponse}}</h1>
</div>
I noticed this specific line here
<div ng-app = "MyApp" ng-controller="myCtrl">
This made me question if it's possible to make my function work without using ng-app. How can I achieve this?