I have been attempting to display data fetched from a server. I created a controller and tried assigning the response to a scope property, using both 'response' and 'response.data', but neither method worked.
Here is how the HTML file appears:
<!DOCTYPE html>
<html>
<head>
<script src="angular.min.js"></script>
<title>Service Call ...</title>
</head>
<body>
<script>
var app = angular.module('myApp', []);
app.controller('customersCtrl', function($scope, $http) {
$http.get("https://linkToServer.json")
.success(function(response) {$scope.trainings = response.data;
});
});
</script>
<div ng-app="myApp" ng-controller="customersCtrl">
<ul>
<li ng-repeat="tr in trainings">
{{ tr.id }}
</li>
</ul>
</div>
</body>
</html>
The JSON structure resembles this:
[
{
"id" : "sm1001",
"name" : "Lu",
},
{
"id" : "lm9898",
"name" : "Di",
},
....
]
What could be the issue?
Plunkr showcases the problem