title: AngularJS - ng-include closes unclosed tags in a HTML file
body: <p>I have one AngularJS application.</p>
  
  <p>In <strong>index.html</strong>  I have one ng-view and two ng-icludes.</p>
  
  <p>Here is how my <strong>index.html</strong></p>
  
  <pre><code>&lt;html ng-app="myApp"&gt;
  &lt;head&gt;
  &lt;!-- CSS imports --&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div ng-include src="'header1.html'"&gt;&lt;/div&gt;
   &lt;div ng-view&gt;&lt;/div&gt;
  &lt;div ng-include src="'footer1.html'"&gt;&lt;/div&gt;
  &lt;/body&gt;
  &lt;!-- JS imports --&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>My <strong>header1.html</strong> is this</p>
  
  <pre><code>&lt;div class="main-container"&gt;
          &lt;div class="main-content"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-10 col-sm-offset-1"&gt;
  </code></pre>
  
  <p>As you can see I have <strong>not closed</strong> any <strong>div</strong> tags here.
  And my <strong>footer1.html</strong> is the one which closes the tags</p>
  
  <pre><code>            &lt;/div&gt;&lt;!-- /.col --&gt;
          &lt;/div&gt;&lt;!-- /.row --&gt;
      &lt;/div&gt;
  &lt;/div&gt;&lt;!-- /.main-container --&gt;
  </code></pre>
  
  <p>In between I have the <strong>ng-view</strong> which will change based path.</p>
  
  <p>But the problem is when I run the application, The first html closes all the tags before the <strong>ng-view</strong>. When I do "Inspect element" in Chrome, I see this:</p>
  
  <pre><code>&lt;div ng-include="" src="'header1.html'"&gt;
      &lt;div class="main-container ng-scope"&gt;
          &lt;div class="main-content"&gt;
              &lt;div class="row"&gt;
                  &lt;div class="col-sm-10 col-sm-offset-1"&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;div ng-view&gt; ... &lt;/div&gt;
  &lt;div ng-include="" src="'footer1.html'"&gt;                        
  
                  &lt;!-- /.col --&gt;
              &lt;!-- /.row --&gt;
  
      &lt;!-- /.main-container --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>All the <strong>divs</strong> are closed. So it does not apply the style to whole page. Why is that so? How can I get in the other way?</p>
  
  <p>(Basically I want to change the templates of header and footer based on the path. Now it is hard coded for testing only.)</p>
  
  <p><strong>EDIT 1</strong></p>
  
  <p>Part of <strong>app.js</strong></p>
  
  <pre><code>myApp.config(['$routeProvider',
    function($routeProvider) {
      $routeProvider
      .when('/login', {
          templateUrl: 'login.html',
          controller: 'LoginController'
      })
      .when('/register', {
          templateUrl: 'register.html',
          controller: 'RegisterController'
        })
       .when('/home', {
         templateUrl: 'views/home.html',
         controller: 'homeController'
      })
     .when('/profile', {
         templateUrl: 'views/profile.html',
         controller: 'profileController'
      })
      .otherwise({
         redirectTo: '/login'
      });
  }]);
  </code></pre>
  
  <p>For login and register my header and footer styles should be different and for other pages I should have other styles.</p>