angular controller doesn't populate property when set from nested http get

Question

I have the following controller that loads in my html page without issue:

app.controller('FeedController', function() {
    this.posts = followedPosts;
});

var followedPosts = [
                       {
                          id: 35,
                        },
                       ];

Here is html reference:

<div ng-controller="FeedController as feed" ng-include="'/static/angular/phone-list/phone-list.template.html'">
<li ng-repeat="post in feed.posts>{{post}}</li>
</div>

When I try to populate the posts from a web service using the same controller, it does not add the posts list to the html template. The controller with service looks like this:

app.controller('FeedController', function($http) {
      $http({method: 'GET', url: 'api/posts/', headers: {'Authorization': 'Bearer '+'asdf'}}).then(function(response) {
      this.posts = response.data;
      //the response is populated but does not show up in the view
    });

  });