title: Angular: ng-view not displaying anything
body: <p>I'm learning Angular so I can get into web app development. I'm doing a test project but can't get ng-view to work. My HTML is as follows:</p>
  
  <pre><code>&lt;!DOCTYPE HTML&gt;
  &lt;html&gt;
  &lt;head&gt;
      &lt;title&gt;TEST PROJECT&lt;/title&gt;
      &lt;link rel="stylesheet" type="text/css" href="test_project.css"&gt;
      &lt;script src="lib/jquery-1.11.3.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/angular-animate.min.js"&gt;&lt;/script&gt;
      &lt;script src="lib/Chart.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-app='TestProject'&gt;
  
      &lt;center&gt;
      &lt;div class="interface" ng-controller="SelectionController"&gt;
          &lt;div style="height: 10%"&gt;
          &lt;a href="http://www.somewebsite.com"&gt;&lt;img style="margin:5px; float:left; height: 10vh" src="pictures/logo.gif"&gt;&lt;/a&gt;
          &lt;center&gt;&lt;h1&gt;{{ title }}&lt;/h1&gt;&lt;/center&gt;
          &lt;/div&gt;
  
          &lt;div style="height: 85%" ng-view&gt;&lt;/div&gt;
  
          &lt;div style="height:5%"&gt;
          &lt;p&gt;Having trouble? &lt;a href="http://www.somewebsite.com/contact.shtml"&gt;Request Support&lt;/a&gt;
          &lt;p style="bottom: 50px; position:fixed; size:8px"&gt;Footer Text
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;/center&gt;
  
  
      &lt;script src="angular/app.js"&gt;&lt;/script&gt;
      &lt;script src="angular/controllers.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I also have app.js:</p>
  
  <pre><code>var app = angular.module('TestProject',['ngRoute', 'ngAnimate']);
  
  app.config(function ($routeProvider){
      $routeProvider
          .when('/', {
              controller:     'SelectionController',
              templateUrl:    '/views/home.html'
      })
          .when('/home/', {
              controller:     'SelectionController',
              templateUrl:    '/views/home.html'
      })
          .otherwise({
              redirectTo: '/home/'
      });
  });
  </code></pre>
  
  <p>As well as controllers.js, which currently only has:</p>
  
  <pre><code>app.controller('SelectionController', ['$scope',function($scope) {
      $scope.title = 'Title!';
  
  }]);
  </code></pre>
  
  <p>And then I have a home.html,</p>
  
  <pre><code>&lt;div&gt;
  &lt;h2&gt;Welcome to this page! Please select an option below.&lt;/h2&gt;
              &lt;table&gt;
                  &lt;td&gt;&lt;div&gt;&lt;img class="Symbol" src="../pictures/pica.jpg"&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;div&gt;&lt;img class="Symbol" src="../pictures/picb.jpg"&gt;&lt;/div&gt;&lt;/td&gt;
                  &lt;td&gt;&lt;div&gt;&lt;img class="Symbol" src="../pictures/picc.jpg"&gt;&lt;/div&gt;&lt;/td&gt;
              &lt;/table&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>which SHOULD be loaded into ng-view. My aim is to make a single page where the center div of the window changes so I can load different screens to do whatever the app does without reloading the other stuff. The current directory structure is like this:</p>
  
  <pre><code>--angular
  ------app
  ------controllers
  --lib
  ------angular.min
  ------angular-animate.min
  ------angular-route.min
  ------Chart.js
  ------jquery-1.11.3
  --pictures
  ------pica
  ------picb
  ------picc
  --views
  ------home.html
  index.html
  test.css
  </code></pre>
  
  <p>What I have now makes {{ title }} change the way it's supposed to, but there's nothing in the middle of the page. When I inspect the page, I see that the <code>ng-view</code> directive is commented.</p>
  
  <pre><code>&lt;-- ngView: undefined --&gt;
  </code></pre>
  
  <p>Is where my content from home.html is supposed to be. Why is ngView being commented out here?</p>