Intentando realizar una petición asíncrona para mostrar un listado en pantalla con AngularJS, me encuentro con el problema de que los datos no son mostrados. ¿A qué puede deberse? En consola no aparece ningún error. Así se ve el listado:
index.html:
<!DOCTYPE html>
<html ng-app="Practicando AngularJS">
<head>
<meta charset="utf-8" />
<title>AngularJS - http</title>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.7.9/angular.min.js"></script>
<script src="controller.js"></script>
</head>
<body ng-controller="FirstController">
<ul>
<li ng-repeat="post in posts">
<h2>{{post.title}}</h2>
<p>
{{post.body}}
</p>
</li>
</ul>
</body>
</html>
controller.js:
angular.module("Practicando AngularJS", [])
.controller("FirstController", function ($scope, $http) {
$scope.posts = [];
$http.get("http://jsonplaceholder.typicode.com/posts")
.then(function(data) {
console.log(data);
$scope.posts = data;
})
//.error(function(err) {
//});
});