Thinkster MEAN Stack Factory

Я просматривал руководство Thinkster.io MEAN Stack, и у меня возник вопрос, почему моя реализация не работает. Я знаю, что это не совсем то, о чем спрашивают, но мне было интересно, как вы это сделаете. Я хотел использовать фабрику, чтобы показать свои сообщения, которые я переместил в свою фабрику из контроллера. Код показан ниже для app.js.

`

var app = angular.module('flapperNews', []);

app.factory('posts', [function(){
var o = {posts:[{title: 'post 1', upvotes: 5}, {title: 'post 2', upvotes: 2},  {title: 'post 3', upvotes: 15}, {title: 'post 4', upvotes: 9},{title: 'post 5', upvotes: 4}];
};
return o;
}]);

app.controller('MainCtrl', ['$scope', 'posts',function($scope, posts){
  $scope.test = 'Hello world!';
  $scope.posts = posts.posts; 
  $scope.addPost = function(){
    if(!$scope.title || $scope.title === ''){
     return; 
    }
    $scope.posts.push({title: $scope.title, link: $scope.link, upvotes: 0}); 
    $scope.title = '';
    $scope.link = '';
    };
  $scope.incrementUpvotes = function(post){
    post.upvotes += 1; 
  };

}]);

`

Первоначально объект сообщений в фабрике находился в контроллере как $scope.posts. Теперь он находится на заводе (обозначается как posts.posts) и не отображается. Как бы вы отобразили массив в html, поскольку у меня есть {{post.title}} под div основного контроллера с ng-repeat, который работает до введения фабрики.