title: template call inside ngView not support angular directive stackoverflow
body: <p>My question involves how to use <code>AngularJS directives</code> in the template called inside <code>ngView</code> in an AngularJS application.</p>
  
  <p><strong>Define :</strong><br>
  The application is single-page, so it loads an index.html that contains a div element(template url) in the DOM with the ng-view attribute.</p>
  
  <p><code>Main Page(</code><strong>index.html</strong><code>) :</code></p>
  
  <pre><code>&lt;html data-ng-app="App" data-ng-controller="AppCtrl"&gt;
    &lt;head&gt;
      &lt;title&gt;Angular App&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.1.5/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="js/app.js"&gt;&lt;/script&gt; 
    &lt;/head&gt;
  &lt;body&gt;
  &lt;!-- primary nav --&gt;
  &lt;a href="#/page1"&gt;Page 1&lt;/a&gt;
  &lt;a href="#/page2"&gt;Page 2&lt;/a&gt;
  &lt;a href="#/page3"&gt;Page 3&lt;/a&gt;
  
  &lt;!-- display the view --&gt;
  &lt;div ng-view&gt;
  &lt;/div&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>app.js :</strong></p>
  
  <pre><code>angular.module('App', [])
  
  .controller('AppCtrl', function($rootScope, appLoading) {
      $rootScope.topScope = $rootScope;
      $rootScope.$on('$routeChangeStart', function() {
        appLoading.loading();
      });
    })
  
  .config(function($routeProvider) {
      $routeProvider.when('/page1', {
        controller : 'Page1Ctrl',
        templateUrl : 'page1.html'
      })
      .when('/page2', {
        controller : 'Page2Ctrl',
        templateUrl : 'page2.html'
      })
      .when('/page3', {
        controller : 'Page3Ctrl',
        templateUrl : 'page3.html'
      })
      .otherwise({
        redirectTo: '/home'
      });
    })
  </code></pre>
  
  <p><strong>page1.html :</strong></p>
  
  <pre><code>&lt;div class="form"&gt;
  &lt;form class="login-profile" method="post" action="" name="editfrm"&gt;
  &lt;input type="text" name="email" value="" id="txtemail" data-ng-model="email" required&gt;
  &lt;input type="password" name="password" value="" id="txtpassword" data-ng-model="password" required&gt;
  &lt;input type="button" value="Save" name="submit"&gt;
  &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Problem :</strong>
  Template Url called inside the <code>ngView</code> not supported any <code>AngularJS deirective</code>.
  <code>data-ng-model="email"</code> &amp; <code>data-ng-model="password"</code> not working when called in the ngView on click the link <code>&lt;a href="#/page1"&gt;Page 1&lt;/a&gt;</code></p>
  
  <p>Any help will be appreciated. Thanks</p>