title: Nesting ng-views in angular js
body: <p>I had two different apps in angular. During integration to a single application I had to </p>
  
  <p>nest ng-views. </p>
  
  <p>For sample (index.html) is</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="myApp"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;My AngularJS App&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/app.css"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;ul class="menu"&gt;
  &lt;li&gt;&lt;a href="#/view1"&gt;view1&lt;/a&gt;&lt;/li&gt;
  &lt;li&gt;&lt;a href="#/view2"&gt;view2&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  
  &lt;div ng-view&gt;&lt;/div&gt;
  
  &lt;div&gt;Angular seed app: v&lt;span app-version&gt;&lt;/span&gt;&lt;/div&gt;
  
  &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/services.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="js/filters.js"&gt;&lt;/script&gt;
  &lt;script src="js/directives.js"&gt;&lt;/script&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>One of my app view is (view2.html)</p>
  
  <pre><code>&lt;div class="ng-view"&gt;&lt;/div&gt;
  &lt;p&gt;This is the partial for view 1.&lt;/p&gt;
  {{ 'Current version is v%VERSION%.' | interpolate }}
  </code></pre>
  
  <p>Now this application has different views once again inside it.</p>
  
  <p>I tried but the page is not loading. Is there a possibility to nest ng-views? </p>
  
  <p>If not Possible can it be explained</p>
  
  <p>Thanks in advance</p>