title: Inline HTML ng-templates not loading
body: <p>I'm following a tutorial on <a href="https://thinkster.io/mean-stack-tutorial#beginning-node" rel="nofollow">Thinkster</a> to learn Angular and MEAN Stack, however I for some reason can't get my template to load inline with my loaded HTML. Can someone point out where I'm going wrong here? The code isn't coloring correctly, and the page doesn't render anything when loaded in a browser. </p>
  
  <p>What am I not understanding about this? The template tags seem to not be matching?</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en"&gt;
      &lt;head&gt;
          &lt;meta charset="UTF-8"&gt;
          &lt;title&gt;Flapper News&lt;/title&gt;
          &lt;link href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" rel="stylesheet"&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"&gt;&lt;!--ng-controller="MainCtrl" style="margin-left:20px; margin-right:20px;"--&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;!-- Start 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;div ng-repeat="post in posts | orderBy: '-upvotes'"&gt;
                  &lt;span class="glyphicon glyphicon-thumbs-up" ng-click="incrementUpvotes(post)"&gt;&lt;/span&gt;
                  {{post.upvotes}}
                  &lt;span style="font-size:20px; margin-left:10px;"&gt;
                      &lt;a ng-show="post.link" href="{{post.title}}"&gt;
                          {{post.title}}
                      &lt;/a&gt;
                      &lt;span ng-hide="post.link"&gt;
                          {{post.title}}
                      &lt;/span&gt;
                  &lt;/span&gt;
              &lt;/div&gt;
              &lt;form ng-submit="addPost()" style="margin-top:30px;"&gt;
                  &lt;h3&gt;Add a 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;/input&gt;
                  &lt;/div&gt;
                  &lt;div class="form-group"&gt;
                      &lt;input type="text"
                          class="form-control"
                          placeholder="Link"
                          ng-model="link"&gt;&lt;/input&gt;
                  &lt;/div&gt;
                  &lt;button type='submit' class="btn btn-primary"&gt;Post&lt;/button&gt;    
              &lt;/form&gt;
          &lt;/script&gt; 
          &lt;!-- end template --&gt;
          &lt;!-- start template --&gt;
          &lt;script type="text/ng-template" id="/posts.html"&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;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;!-- end template --&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I'm getting this error:</p>
  
  <pre><code>Error: $injector:modulerr
  Module Error
  </code></pre>
  
  <p>Here's my app.js</p>
  
  <pre><code>    /*global angular*/
  var app = angular.module('flapperNews', []);
  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'
          });
          .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.posts = [
          {title: 'post 1', upvotes: 12},
          {title: 'post 2', upvotes: 14},
          {title: 'post 3', upvotes: 16},
          {title: 'post 4', upvotes: 11},
          {title: 'post 5', upvotes: 1}
          ];
      $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 everything is wrong!', upvotes: 0}
              ]
          });
          $scope.title = '';
          $scope.link = '';
      }
      $scope.incrementUpvotes = function(post){
          post.upvotes += 1;
      }
  }]);
  
  app.controller('PostsCtrl', [ '$scope', '$stateParams', 'posts',
      function($scope, $stateParams, posts){
          $scope.post = posts.posts[$stateParams.id];
      }]);
  </code></pre>