title: AngularJS Unknown TypeError: Cannot Read Property '1' Of Null
body: <p>Below Is the code that Im getting problem with:</p>
  
  <pre><code>//Main Codes for the Diary App
  
  (function () {
  //Create a new diary app
  var diary = angular.module('diary', ['ngRoute']);
  
  //Define a Router for the App
  diary.config(function ($routeProvider) {
          $routeProvider.
  
  
              when('/', {
                  templateUrl: 'partials/wall.php',
                  controller: 'DiaryWallController'
              }).
  
  
              when('/images', {
                  templateUrl: 'partials/images.html',
                  controller: 'DiaryImagesController'
              }).
  
  
              when('/audio', {
                  templateUrl: 'partials/audio.html',
                  controller: 'DiaryAudioController'
              }).
  
  
              otherwise({
                  redirectTo: '/'
              });
  });
  
  //Define Controllers
  diary.controller('DiaryWallController', function($scope) {
      $scope.message = "Lets do this!! Wall of this site";
  });
  
  diary.controller('DiaryImagesController', function($scope) {
      $scope.message = "Lets do this!! Images of this site";
  });
  
  diary.controller('DiaryAudioController', function($scope) {
      $scope.message = "Lets do this!! Audio of this site";
  });})();
  </code></pre>
  
  <p>I am getting this Unknown TypeError: Cannot read property '1' of NuLL.
  It successfully fetch the files specified in the route but it doesn't display in the site.. I have checked the console:</p>
  
  <pre><code>XHR finished loading: GET "http://localhost/mobile%20diary/app/partials/images.html". 
  </code></pre>
  
  <p>But the contents of the loaded page is not displayed in the site.
  I check in resources and in there the images.html file is loaded and I can see the file preview but it is not shown in the site.</p>
  
  <p>Below is the HTML Shell file: </p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="diary"&gt;
  &lt;head lang="en" ng-controller=""&gt;
  &lt;meta charset="UTF-8"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.css" type="text/css"&gt;
  &lt;link rel="stylesheet" href="css/style.css" type="text/css"&gt;
  &lt;meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"&gt;
  &lt;title&gt;&lt;/title&gt;
  &lt;/head&gt;
  &lt;body&gt;
  
  
  &lt;header&gt;
  &lt;nav class="menu-nav"&gt;
      &lt;ul&gt;
          &lt;li class="menu-buttons"&gt;&lt;a href="#" id="selected"&gt;&lt;i class="fa fa-newspaper-o"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-buttons"&gt;&lt;a href="#images"&gt;&lt;i class="fa fa-file-text-o"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-buttons"&gt;&lt;a href="#audio"&gt;&lt;i class="fa fa-image"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-buttons"&gt;&lt;a href=""&gt;&lt;i class="fa fa-microphone"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
          &lt;li class="menu-buttons"&gt;&lt;a href="" id="selected"&gt;&lt;i class="fa fa-navicon"&gt;&lt;/i&gt;&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  &lt;/header&gt;
  
  &lt;div ng-view&gt;
  
  &lt;/div&gt;
  
  
  &lt;script src="js/angular.js"&gt;&lt;/script&gt;
  &lt;script src="js/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>