title: Angularjs external templating: the template cannot be loaded?
body: <p>I thought loading an external template with Angularjs is as simple as this below,</p>
  
  <pre><code>&lt;div ng-include='template/index.php'&gt;&lt;/div&gt;
  </code></pre>
  
  <p>But it does not print anything out on the browser. What have I missed?</p>
  
  <p>The html,</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;Angualr&lt;/title&gt;
          &lt;meta charset="utf-8"&gt;
          &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
          &lt;script src="js/app.js" type="text/javascript"&gt;&lt;/script&gt;
          &lt;script src="js/maincontroller.js" type="text/javascript"&gt;&lt;/script&gt;
      &lt;/head&gt;
  
      &lt;body&gt;
  
          &lt;div ng-include='template/index.php'&gt;&lt;/div&gt;
  
      &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>the template,</p>
  
  <pre><code>&lt;div id='content' ng-app='MyTutorialApp' ng-controller='MainController'&gt;
      &lt;input type='text' ng-model='searchText' /&gt;
      &lt;ul&gt;
          &lt;li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'&gt;#{{person.id}} {{person.name}}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;input type='text' ng-model='newPerson' /&gt;
      &lt;button ng-click='addNew()'&gt;Add&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>js/app.js,</p>
  
  <pre><code>var app = angular.module('MyTutorialApp',[]);
  </code></pre>
  
  <p>js/maincontroller.js,</p>
  
  <pre><code>app.controller("MainController", function($scope){
  
      $scope.people = [
          {
              id: 0,
              name: 'Leon',
              music: [
                  'Rock',
                  'Metal',
                  'Dubstep',
                  'Electro'
              ],
              live: true
          },
          {
              id: 1,
              name: 'Chris',
              music: [
                  'Indie',
                  'Drumstep',
                  'Dubstep',
                  'Electro'
              ],
              live: true
          }
      ];
      $scope.newPerson = null;
      $scope.addNew = function() {
          if ($scope.newPerson != null &amp;&amp; $scope.newPerson != "") {
              $scope.people.push({
                  id: $scope.people.length,
                  name: $scope.newPerson,
                  live: true,
                  music: [
                      'Pop',
                      'RnB',
                      'Hip Hop'
                  ]
              });
          }
      }
  });
  </code></pre>
  
  <p><strong>EDIT:</strong></p>
  
  <p>Directories,</p>
  
  <pre><code>index.html
    js/
     ...
     ...
    template/
      index.php
  </code></pre>
  
  <p><strong>EDIT 2:</strong></p>
  
  <p>index.html,</p>
  
  <pre><code>&lt;div ng-app='MyTutorialApp'&gt;
          &lt;div ng-include='template/index.php'&gt;&lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>template/index.php,</p>
  
  <pre><code>    &lt;div id='content' ng-controller='MainController'&gt;
      &lt;input type='text' ng-model='searchText' /&gt;
      &lt;ul&gt;
          &lt;li ng-repeat='person in people | filter:searchText' ng-show='person.live == true'&gt;#{{person.id}} {{person.name}}&lt;/li&gt;
      &lt;/ul&gt;
      &lt;input type='text' ng-model='newPerson' /&gt;
      &lt;button ng-click='addNew()'&gt;Add&lt;/button&gt;
  
  &lt;/div&gt;
  </code></pre>