title: Can't get an AngularJS template to display
body: <p>I am trying to walk through an Angular tutorial and having trouble with some basics.  </p>
  
  <p>I have the following directory structure:</p>
  
  <pre><code>index.html
  angular.min.js
  angular-route.js
  app
      views
          customers.html
          orders.html
  </code></pre>
  
  <p>The files in app/views/ folder are templates. In index.html, I have the following</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html lang="en" xmlns="http://www.w3.org/1999/xhtml" ng-app="customersApp"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;Angular Test&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
      &lt;div ng-view&gt;&lt;/div&gt;
  
      &lt;script type="text/javascript" src="angular.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript" src="angular-route.js"&gt;&lt;/script&gt;
      &lt;script&gt;
          var app = angular.module('customersApp', ['ngRoute']);
  
          app.config(function ($routeProvider) {
              $routeProvider
                  .when('/',
                  {
                      controller: 'CustomersController',
                      templateUrl: 'app/views/customers.html'
                  })
                  .when('/orders',
                  {
                      controller: 'OrdersController',
                      templateUrl: 'app/views/orders.html'
                  })
                  .otherwise({
                      redirectTo: '/'
                  });
          });
  
          app.controller('CustomersController', function ($scope) {
              $scope.customers = [
                  { "id": 1, "name": 'Ted', "total": 5.994 },
                  { "id": 2, "name": 'Michelle', "total": 2.994 }
              ];
          });
  
          app.controller('OrdersController', function ($scope) {
              $scope.customerId = 5;
          });        
  
      &lt;/script&gt;
  
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>In customers.html, I have the following:</p>
  
  <pre><code>&lt;div ng-controller="CustomersController"&gt;
      Search:
      &lt;input type="text" ng-model="searchText" /&gt;
      {{ searchText }}
  
  
      &lt;h3&gt;Customers: &lt;/h3&gt;
      &lt;table&gt;
          &lt;tr ng-repeat="cust in customers | filter:searchText"&gt;
              &lt;!-- &lt;td&gt;{{ cust.id }}&lt;/td&gt;--&gt;
              &lt;td&gt;{{ cust.name }}&lt;/td&gt;
              &lt;td&gt;{{ cust.total | currency }}&lt;/td&gt;
          &lt;/tr&gt;
      &lt;/table&gt;
  &lt;/div&gt;        
  </code></pre>
  
  <p>Given that I have <code>&lt;div ng-view&gt;&lt;/div&gt;</code> in index.html, I would thing that Angular would correctly route me to the customers.html template, but it displays an empty screen.</p>
  
  <p>I have 2 questions:</p>
  
  <ol>
  <li>Why won't my template display?  Am I missing something simple?</li>
  <li>How do I debug this problem? I've looked in the F12 tools and see no errors under console.  I've stepped through the code and there are no errors. </li>
  </ol>
  
  <p>P.S.  I know the directory structure is not optimal.</p>