Displaying data with AngularJS loaded by NodeJS

I'm building my first MEAN twitter like application and currently try to display a list of posts to the gui. what I currently do is:

The angular.js part:

in my main.js:

angular.module('MyApp')
  .controller('MainCtrl', ['$scope', 'Feed', function($scope, Feed) {
        $scope.feeds = Feed.showFeeds();
// ... 
}

in my feed.js:

angular.module('MyApp')
    .factory('Feed', ['$http', '$location', '$rootScope', '$cookieStore', '$alert', '$resource',
        function ($http, $location, $rootScope, $cookieStore, $alert, $resource) {
    return {
      // other functions like addFeed: function(f) {...},
      showFeeds: function() {
        return $http.get('/api/feeds');
      }

The node.js part:

app.get('/api/feeds', function (req, res, next) {
    var query = Feed.find();
    query.limit(8);
    query.exec(function (err, feeds) {
        if (err) return next(err);
        res.send(feeds)
        // feeds is a corret JSON with all my data at this point
    });
});

and my home.html:

 <p>{{ feeds }}</p> <!-- for testing - this just returns {} -->
 <div ng-repeat="feed in feeds">
 <div>
     <a href="/feeds/{{feed._id}}">{{feed.feedMessage}}</a>
 </div>

So my problem is: Everything loads fine, but nothing renders out on the page, I don't get any errors, just my $scope.feeds object is empty. I'm pretty new to this, so maybe it's an obvious bug, but if someone could point me in the right direction, that would be great!

Right now you are returning a promise, and you need to be accessing the data.:

Feed.showFeeds().success( function(data) { 

    $scope.feeds = data.feeds;

});

The '$http' service provided by angular return always an instance of '$q', another angular service which allows us to use the Promise syntax for all async commands.

When you assign the return of Feed.showFeeds() to your scope variable, you bind a promise to your view and Angular can't display it.

You should use the success method provide by $http in order to get the server data and bind them to your scope variable like bencripps said.

Note: The success method (and error) are specific methods of $http and call the $digest method of angular which triggers a refresh of the view automatically.

angular.module('MyApp')
  .controller('MainCtrl', ['$scope', 'Feed', function($scope, Feed) {
        $scope.feeds = [];
        Feed.showFeeds().success(function(data) { 
           //depends of the json return 
           //try a console.log(data)
           $scope.feeds = data.feeds
        });

// ... 
}