title: Angular ngRoute can't load template: Error [$compile:tpload]
body: <p>I tried some simple Angular Routing, but I cant specify what's the error. Chrome just tells me that Angular can't compile the Template.</p>
  
  <p>In the following Link you can see my directory structure.</p>
  
  <p><a href="http://i.stack.imgur.com/BknYq.png" rel="nofollow">directory-structure</a></p>
  
  <p>-- angular.js</p>
  
  <pre><code>var testApp = angular.module('testApp', ['ngRoute']);
  
  testApp.config(function($routeProvider){
      $routeProvider.when('/list', {
          templateUrl: 'pages/list.html',
          controller: 'mainController'
      }).when('/insert', {
          templateUrl: 'pages/new.html',
          controller: 'newController'
      });
  });
  
  
  testApp.controller('mainController', function($scope){
      $scope.message = 'main';
  });
  
  testApp.controller('newController', function($scope){
      $scope.message = 'new';
  });
  </code></pre>
  
  <p>--index.html</p>
  
  <pre><code>    &lt;!DOCTYPE html&gt;
  &lt;html lang="en" ng-app="testApp"&gt;
  &lt;head&gt;
      &lt;meta charset="UTF-8"&gt;
      &lt;title&gt;Barfly&lt;/title&gt;
      &lt;script src="/angular/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="/angular-route/angular-route.min.js"&gt;&lt;/script&gt;
      &lt;script src="/js/angularApp.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  &lt;body ng-controller="mainController"&gt;
      &lt;a href="#list"&gt;list&lt;/a&gt;
      &lt;a href="#insert"&gt;new&lt;/a&gt;
      &lt;div id="main"&gt;
          &lt;div ng-view&gt;&lt;/div&gt;
      &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>This is my error, </p>
  
  <p><a href="http://i.stack.imgur.com/AXcHl.png" rel="nofollow">Browser Error</a></p>
  
  <p>Thank you in advance!</p>