title: typeError: Cannot read property 'childNodes' of undefined in angular js
body: <p>I have a problem in angularjs when i trying to execute this code it returns to me TypeError: Cannot read property 'childNodes' of undefined.</p>
  
  <p>Here is my code :
  <strong>index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html ng-app="myApp"&gt;
  &lt;head&gt;
  &lt;link href="http://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet"&gt;
  &lt;link rel="stylesheet" href="css/materialize.css"&gt;
  &lt;link rel="stylesheet" href="css/materialize.min.css"&gt;
  &lt;link rel="stylesheet" href="css/custom.css"&gt; 
  
  &lt;script src="js/jquery-1.8.2.min.js" type="text/javascript"&gt;&lt;/script&gt;
  &lt;script src="js/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/angular-route.min.js"&gt;&lt;/script&gt;
  &lt;script src="js/angular-messages.js"&gt;&lt;/script&gt;
  &lt;script src="js/materialize.js"&gt;&lt;/script&gt;
  &lt;script src="js/materialize.min.js"&gt;&lt;/script&gt;
  &lt;script src="services/app.js"&gt;&lt;/script&gt;
  &lt;script src="services/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="services/common/services.js"&gt;&lt;/script&gt;
  &lt;script src="services/oliveService.js"&gt;&lt;/script&gt;
  
  &lt;title&gt;Task Managment System&lt;/title&gt;
  &lt;/head&gt;
  &lt;body ng-view&gt;
  
  &lt;/body&gt;
  &lt;h1&gt;{{message}}&lt;/h1&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>angular.module('myApp', ['ngRoute','myApp.services','myApp.controllers'])
  
  .config(function($routeProvider) {
  $routeProvider
  
     .when('',{
     })
  
     .when('/blah', {
       title: 'Blah',
       templateUrl : 'templates/blah.html'
     })
     .otherwise({redirectTo: '/login'}); 
  })
  
  .directive('header', function () {
   return {
      replace: true,
      templateUrl: "templates/header.html",
      controller: "HeaderCtrl" 
   }
  })
  </code></pre>
  
  <p>When i remove templateURl from the directive then it work fine but i need this directive content is called from the template.</p>
  
  <p><strong>controller.js</strong></p>
  
  <pre><code>.controller('HeaderCtrl', function($scope, $http){
      console.log('Header controller called');
      //$(".dropdown-button").dropdown();
  })
  </code></pre>
  
  <p>when i am also comment jquery line it works. this is used for dropdown content in header</p>
  
  <p><strong>header.html</strong></p>
  
  <pre><code> &lt;div&gt;
       &lt;ul id="dropdown1" class="dropdown-content"&gt;
           &lt;li&gt;&lt;a href="javascript:void(0)" ng-click="logout()"&gt;logout&lt;/a&gt;&lt;/li&gt;
           &lt;li&gt;&lt;a href="javascript:void(0)" ng-click="call_page('account')"&gt;Setting&lt;/a&gt;&lt;/li&gt;
       &lt;/ul&gt;
       &lt;nav&gt;
            &lt;div class="nav-wrapper"&gt;
            &lt;a href="javascript:void(0)" class="brand-logo"&gt;Timetrack&lt;/a&gt;
            &lt;ul class="right hide-on-med-and-down"&gt;
                &lt;li&gt;
                    &lt;a class="dropdown-button" href="#!" data-activates="dropdown1"&gt;{{email | capitalize}}
                    &lt;i class="material-icons right"&gt;arrow_drop_down&lt;/i&gt;&lt;/a&gt;
                &lt;/li&gt;
           &lt;/ul&gt;
           &lt;/div&gt;
       &lt;/nav&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>in the header.html there is plenty of code but here i am just print a some of them.
  I need to apply this header directive in other pages like </p>
  
  <p><strong>blah.html</strong></p>
  
  <pre><code>&lt;div header&gt;&lt;/div&gt;
  &lt;div&gt;
      &lt;h1&gt; this is blah &lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>