title: Loading template on page load through state - AngularJS
body: <p>In my application, I want the nested view <code>list-patents.htm</code> to load when the index page loads. </p>
  
  <p>My main nav is on my <code>index.htm</code>, with two nav items <code>transactions</code> and <code>patents</code>. </p>
  
  <p>If you were to click on <code>patents</code>, a further two sub-menu items would load: <code>list patents</code> and <code>add patents</code>. Here you can then navigate to <code>list-patents.htm</code> which I want to act as the landing view.</p>
  
  <p>I have tried two methods:</p>
  
  <ul>
  <li><code>$urlRouterProvider.otherwise("");</code> which I couldn't get to work.</li>
  <li><p>This method (which is in my script) loaded the nested view, but failed to load its parent nest view, the nav menu.</p>
  
  <p><code>.state("index",
  {
      url: "",
      templateUrl: "templates/list-patents.htm",
  })</code></p></li>
  </ul>
  
  <p>I want to keep the navigation in its own view, as I don't see the point of creating duplicate code. </p>
  
  <p>Any ideas how on page load, it loads the <code>patent-nav.htm</code> and it's nested view <code>list-patents.htm</code>? Any help would be greatly appreciated</p>
  
  <hr>
  
  <p><strong>app.js</strong></p>
  
  <pre><code>var app = angular.module('myApp', ['ngRoute', 'angularMoment', 'ui.router']);
  
  
  app.config(['$stateProvider', '$locationProvider', '$urlRouterProvider', function($stateProvider, $locationProvider, $urlRouterProvider ) {
  
      $stateProvider
      .state("index",
      {
          url: "",
          templateUrl: "templates/list-patents.htm",
      })
      .state("patents", {
          url: "/patents",
          templateUrl: "templates/patent-nav.htm",
          controller: "patentCtrl"
      })
      .state("patents.list", {
          url: "/list-patents",
          templateUrl: "templates/list-patents.htm",
          controller: "patentCtrl"
      })
      .state("patents.add", {
          url: "/add-patents",
          templateUrl: "templates/add-patent.htm",
          controller: "patentCtrl"
      })
  </code></pre>
  
  <p><strong>Views</strong></p>
  
  <p><strong>index</strong></p>
  
  <pre><code>&lt;main class="container"&gt;
      &lt;nav&gt;
          &lt;ul&gt;
              &lt;a ui-sref="patents"&gt;Patents&lt;/a&gt;
              &lt;a ui-sref="transactions"&gt;Transactions&lt;/a&gt;
          &lt;/ul&gt;
      &lt;/nav&gt;  
      &lt;section ui-view&gt;
  
      &lt;/section&gt;
  &lt;/main&gt;
  </code></pre>
  
  <p><strong>patent-nav</strong></p>
  
  <pre><code>&lt;nav&gt;
      &lt;ul&gt;
          &lt;li&gt;&lt;a ui-sref="patents.list"&gt;List patents&lt;/a&gt;&lt;/li&gt;
          &lt;li&gt;&lt;a ui-sref="patents.add"&gt;Add patent&lt;/a&gt;&lt;/li&gt;
      &lt;/ul&gt;
  &lt;/nav&gt;
  
  &lt;div ui-view&gt;&lt;/div&gt;
  </code></pre>
  
  <p><strong>list-patents</strong></p>
  
  <pre><code>&lt;div&gt;
  //just a load of content
  &lt;/div&gt;
  </code></pre>