title: Suggestion box app won't display suggestions
body: <p>I'm trying to create a suggestion box app in JavaScript using AngularJS 1.X that people can post suggestions on and upvote those suggestions. I'm having trouble getting the suggestions to show up on the page. Help? Here's my code: </p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;Head&gt;
      &lt;title&gt;Suggestion Box&lt;/title&gt;
      &lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.9/angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="https://code.angularjs.org/1.2.28/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css" rel="stylesheet"&gt;
  &lt;/Head&gt;
  &lt;body ng-app="SuggestionBox" ng-controller="HomeController"&gt;
      &lt;h1&gt; Suggestion Box &lt;/h1&gt;
      &lt;form ng-submit="addSuggestion()" style="margin-top: 50px"&gt;
          &lt;h3&gt; Submit Your Suggestion &lt;/h3&gt;
          &lt;div class="form-group"&gt;
              &lt;input type="text" class="form-control" placeholder="Great ideas here" ng-model="title"&gt;&lt;/input&gt;
          &lt;/div&gt;
          &lt;button type="submit" class="btn btn-primary"&gt;Suggest&lt;/button&gt;
      &lt;/form&gt;
      &lt;div class="main" ng-repeat="post in posts"&gt;&lt;/div&gt;
      &lt;p&gt;
          &lt;span class="glyphicon glyphicon-plus-sign" ng-click="upVote(post)"&gt;&lt;/span&gt; Upvotes: &lt;span id="$scope.posts.upvotes"&gt;&lt;/span&gt;
      &lt;/p&gt;
  
      &lt;!-- Modules --&gt;
      &lt;script type="text/javascript" src="C:\Users\Olivia\Documents\JS\app.js"&gt;&lt;/script&gt;
  
      &lt;!-- Controllers --&gt;
      &lt;script type="text/javascript" src="C:\Users\Olivia\Documents\JS\controllers\HomeController.js"&gt;&lt;/script&gt;
  
      &lt;!-- Services --&gt;
      &lt;script type="text/javascript" src="C:\Users\Olivia\Documents\JS\Services\Suggestions.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>app.controller('HomeController', ['$scope', 'suggestions', function($scope, suggestions) {
      $scope.helloWorld = "Hello, AngularJS!",
      $scope.posts = Suggestions.posts,
      $scope.addSuggestion = function($scope.title) {
          if(!$scope.title || $scope.title === "") {
              return;
          };
          $scope.posts.push({
              title: $scope.title,
              upvotes: 0,
          });
          $scope.title = '';
      }
      $scope.upVote = function(post) {
          $scope.posts[post].upvotes += 1;
      };
  
  }]);
  </code></pre>
  
  <p>app.js:</p>
  
  <pre><code>var app = angular.module('SuggestionBox', ['ngRoute']);
  </code></pre>
  
  <p>I haven't added any routing yet so the route is just sitting there</p>
  
  <p>Suggestions.js:</p>
  
  <pre><code>app.factory('Suggestions', [function(){
      var demoSuggestions  = {
          posts: [
              {
                  title: 'Insert suggestion here', 
                  upvotes: 10,
                  comments: [],
              },
              {
                  title: 'See above',
                  upvotes: 2,
                  comments: [],
              },
          ]
      };
      return demoSuggestions;
  }]);
  </code></pre>
  
  <p>Any help would be greatly appreciated. Thanks!</p>