title: ng-view doesn't show anything in my angularJS app
body: <p>I'm new in Angular. I have a simple angular app and I try to see how routing works in angular. I have three links which I want angular to change the URL for me and show the right view for each link in the same single page application.
  This is my code:</p>
  
  <p><strong>index.html</strong></p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;meta http-equiv="X-UA-Compatible" content="IE=edge"&gt;
      &lt;meta name="viewport" content="width=device-width, initial-scale=1"&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="author" content=""&gt;
  
      &lt;title&gt;Agent Portal&lt;/title&gt;
  
      &lt;link href="css/bootstrap.min.css" rel="stylesheet"&gt;
  
      &lt;link href="css/justified-nav.css" rel="stylesheet"&gt;
  
    &lt;/head&gt;
  
    &lt;body ng-app="AgentApp"&gt;
  
      &lt;div class="container" ng-controller="createdPackagesController"&gt;
  
        &lt;div class="masthead"&gt;
          &lt;h3 class="text-muted"&gt;Project name&lt;/h3&gt;
  
          &lt;ul class="nav nav-justified"&gt;
              &lt;li &gt;&lt;a href="#/createdPackages"&gt;Created Packages&lt;/a&gt;&lt;/li&gt;
              &lt;li &gt;&lt;a href="#/reservedPackages"&gt;Reserved Packages&lt;/a&gt;&lt;/li&gt;
              &lt;li &gt;&lt;a href="#/publishedPackages"&gt;Published Packages&lt;/a&gt;&lt;/li&gt;
          &lt;/ul&gt;
  
        &lt;/div&gt;
  
        &lt;div ng-view&gt;&lt;/div&gt;
  
      &lt;/div&gt;
  
      &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular-route.js"&gt;&lt;/script&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>controllers.js</strong></p>
  
  <pre><code>var AgentApp = angular.module('AgentApp', [ngRoute]);
  
  AgentApp.config(['$routeProvider', function($routeProvider) {
          $routeProvider.when('/', {
                  controller: 'createdPackagesController',
                  templateUrl: 'views/createdpackages.html'
              })
  
              .when("/reservedPackages", {
                  controller: "reservedPackagesController",
                  templateUrl: "views/reservedpackages.html"
              })
  
              .when("/publishedPackages", {
                  controller: "publishedPackagesController",
                  templateUrl: "views/publishedpackages.html"
              }).otherwise({ redirectTo: '/'});
      }]);
  
  
      // create the controller and inject Angular's $scope
      AgentApp.controller('createdPackagesController', function($scope) {
          // create a message to display in our view
          $scope.message = 'Everyone come and see how good I look!';
      });
  
      AgentApp.controller('reservedPackagesController', function($scope) {
          $scope.message = 'Look! I am an about page.';
      });
  
      AgentApp.controller('publishedPackagesController', function($scope) {
          $scope.message = 'Contact us! JK. This is just a demo.';
      });
  </code></pre>
  
  <p>The app doesn't show anything for ng-view. What should I change?
  I followed many examples that are online, but don't know what I'm missing.
  [I have seen many similar questions here, but they had their own specific problem (jquery related, browser problem, ..).]</p>
  
  <p>Thanks,</p>