Nothing is displaying in browser


#1



index.html



Suggestion Box






{{ posts.title }}










suggestion.js
app.factory('suggestions', [function(){
var demoSuggestions = {

posts: [
{
title: 'Free pizza at club meetings',
upvotes: 15,
comments: [],
},
{
title: 'End all club emails with Laffy Taffy jokes',
upvotes: 9,
comments: [],
},
{
title: 'Retrofit water fountain with Gatorade',
upvotes: 7,
comments: [],
},
{
title: 'Sing Bon Jovi\'s "Living on a Prayer" halfway through meetings',
upvotes: 3,
comments: [],
},
]};
return demoSuggestions;
}]);

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

HomeController.js
app.controller('HomeControllers', ['$scope','suggestions', function($scope, suggestions) {

$scope.posts = suggestions.posts;
}]);


#2

Make sure you've included all the necessary .js files in your index.html


#3

Since you have several objects, this expression won't work. Try just {{ posts }} to see if whole array shows up in the view. If it does, iterate through it with ng-repeat and display each record separately.