title: ui-route in AngularJS showing empty page
body: <p>I am trying to learn AngularJS by following this tutorial: <a href="https://thinkster.io/mean-stack-tutorial" rel="nofollow">https://thinkster.io/mean-stack-tutorial</a>.</p>
  
  <p>I got up to the part right before it says "Creating New Comments". The problem I'm having is that when I click "Comments", a blank page appears with just a horizontal line.</p>
  
  <p>It was my understanding that the title of the post should be on top with the two fake comments. Here's my code:</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;title&gt;Flapper News&lt;/title&gt;
  
          &lt;!-- BOOTSTRAP --&gt;
          &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&gt;
  
          &lt;!-- ANGULARJS --&gt;
          &lt;script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.3.10/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-router/0.2.10/angular-ui-router.js"&gt;&lt;/script&gt;
          &lt;script src="app.js"&gt;&lt;/script&gt;
  
          &lt;style&gt; .glyphicon-thumbs-up { cursor:pointer } &lt;/style&gt;
      &lt;/head&gt;
  
      &lt;body ng-app="flapperNews" style="padding: 50px"&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-md-6 col-md-offset-3"&gt;
                  &lt;ui-view&gt;&lt;/ui-view&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
          &lt;!-- Inline home template --&gt;
          &lt;script type="text/ng-template" id="/home.html"&gt;
              &lt;div class="page-header"&gt;
                  &lt;h1&gt;Flapper News&lt;/h1&gt;
              &lt;/div&gt;
  
              &lt;!-- Show all the posts --&gt;
              &lt;div ng-repeat="post in posts | orderBy: '-upvotes'" style="margin-bottom: 10px;"&gt;
  
                  &lt;div class="row"&gt;
                      &lt;div class="col-md-2" style="width: 80px;"&gt;
                          &lt;span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"&gt;&lt;/span&gt;
                          &amp;nbsp;&amp;nbsp;{{post.upvotes}}
                      &lt;/div&gt;
  
                      &lt;div class="col-md-9"&gt;
                          &lt;span style="font-size:20px;"&gt;
                              &lt;a ng-show="post.link" href="{{post.link}}"&gt;{{post.title}}&lt;/a&gt;
                              &lt;span ng-hide="post.link"&gt;{{post.title}}&lt;/span&gt;
                          &lt;/span&gt;
  
                          &lt;br /&gt;
                          &lt;span style="font-size: 12px;"&gt; 
                              &lt;a href="#/posts/{{$index}}"&gt;Comments&lt;/a&gt; l 
                              &lt;a href="#/posts/{{$index}}"&gt;Share&lt;/a&gt;
                          &lt;/span&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;!-- Form to make new posts --&gt;
              &lt;form ng-submit="addPost()" style="margin-top:30px;"&gt;
                  &lt;h3&gt;Add New Post&lt;/h3&gt;
  
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Title" ng-model="title" /&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text" class="form-control" placeholder="Link" ng-model="link" /&gt;
                  &lt;/div&gt;
  
                  &lt;button type="submit" class="btn btn-primary" ng-click="submit"&gt;Post&lt;/button&gt;
              &lt;/form&gt;
          &lt;/script&gt;
  
          &lt;!-- Inline Posts section --&gt;
          &lt;script type="text/ng-template" id="/posts.html"&gt;
  
              &lt;!-- Display title as header --&gt;
              &lt;div class="page-header"&gt;
                  &lt;h3&gt;
                      &lt;a ng-show="post.link" href="{{post.link}}"&gt;{{post.title}}&lt;/a&gt;
                      &lt;span ng-hide="post.link"&gt;{{post.title}}&lt;/span&gt;
                  &lt;/h3&gt;
              &lt;/div&gt;
  
              &lt;!-- Display the comment --&gt;
              &lt;div ng-repeat="comment in post.comments | orderBy:'-upvotes'"&gt;
                  &lt;span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(comment)"&gt;&lt;/span&gt;
                  {{comment.upvotes}} - by {{comment.author}}
                  &lt;span style="font-size:20px; margin-left:10px;"&gt;{{comment.body}}&lt;/span&gt;
              &lt;/div&gt;
          &lt;/script&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>app.js</p>
  
  <pre><code>var app = angular.module('flapperNews', ['ui.router']);
  
  app.factory('posts', [function() {
      var o = {
          posts: []
      };
  
      return o;
  }]);
  
  app.config([
      '$stateProvider',
      '$urlRouterProvider',
  
      function($stateProvider, $urlRouterProvider) {
          $stateProvider
          .state('home', {
              url: '/home',
              templateUrl: '/home.html',
              controller: 'MainCtrl'
          });
  
          $stateProvider
          .state('posts', {
              url: '/posts/{id}',
              templateUrl: '/posts.html',
              controller: 'PostsCtrl'
          });
  
          $urlRouterProvider.otherwise('home');
  }]);
  
  app.controller('MainCtrl', ['$scope', 'posts', function($scope, posts) {
      $scope.posts = posts.posts;
  
      $scope.addPost = function() {
          if(!$scope.title || $scope.title === '') {
              return;
          }
  
          $scope.posts.push({
              title: $scope.title, 
              link: $scope.link,
              upvotes: 0,
              comments: [
                  {author: 'Joe', body: 'Cool Post!', upvotes: 0},
                  {author: 'Bob', body: 'Great idea but no!', upvotes: 0}
              ]});
  
          $scope.title = '';
          $scope.link = '';
      };
  
      $scope.incrementUpvotes = function(post) {
          post.upvotes += 1;
      }
  
  }]);
  
  app.controller('PostsCtrl', [
      '$scope', 
      '$stateParams', 
      'posts', 
      function($scope, $stateParams, posts) {
          $scope.posts = posts.posts['$stateParams.id'];
  }]);
  </code></pre>
  
  <p>I'm not sure what I'm doing wrong for it to display nothing. Any help would be appreciated, thank you!</p>
  
  <p>Console Errors:</p>
  
  <p><code>The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.</code></p>
  
  <p><code>Use of getPreventDefault() is deprecated.  Use defaultPrevented instead.</code></p>