Binding an array of json results to html in angularjs

Question

I'm pretty new to angularjs, and getting a json result set that I'd like to display. I have the following;

Service:

var Post = function(data) {
    angular.extend(this, data);
}

Post.getAll = function() {
    return $http.get('/api/posts').then(function(response) {
        var Posts = [];
        for(var i = 0; i < response.data.length; i++) {
            Posts.push(new Post(response.data[i]));
        }
        return Posts;
    });
};

Controller method:

$scope.Posts = Posts.getAll();

html view:

<ul ng-repeat="post in Posts">
    <li>{{ post.title }}</li>
</ul>

The problem is that while everything repeats correctly, I cannot access the members of each object. eg: post.title or post.text does not display. However, if I use {{ post }} it displays the json for the entire result.

Where am I going wrong here?

Edit: I've just seen thanks to the comment below that if I use

post[0].title

It correctly displays, however is this the correct way to be displaying an array of json results? I'd prefer to use the correct method, vs the one that "just works".

Answer 1

As per comments by ranru and Zack Argyle, I simply needed to add the index to post, eg: post[0].title.