title: Set default nested state in ui-router
body: <p>I have two level nested state on ui-router and I can't set a default nested state for some view.</p>
  
  <p>I need to load the state <code>cars.detail.supply.list</code> when the state <code>cars.detail</code> is active without changing the current url.</p>
  
  <p>I'm expecting to show <code>supplies</code> list without click on <code>List supplies</code> button.</p>
  
  <p>What am I missing?</p>
  
  <p><strong>Full code:</strong> <a href="https://plnkr.co/edit/DqwhaDXh3biMbq9PLCV3?p=preview" rel="nofollow noreferrer">https://plnkr.co/edit/DqwhaDXh3biMbq9PLCV3?p=preview</a></p>
  
  <h2>ui-states:</h2>
  
  <pre><code>.state('cars.detail', {
      parent: 'cars',
      url: '/edit/:id',
      views: {
          'content@index': {
              templateUrl: 'cars.detail.html',
              controller: 'CarDetailController'
          },
          'supplies': {
              templateUrl: 'cars.supply.html',
              controller: 'CarDetailController'
          }
      }
  })
  
  .state('cars.detail.supply', {
      url: '',
      parent: 'cars.detail',
      abstract: true,
      //'default': '.list',
      views: {
          'supplies@cars.detail': {
              templateUrl: 'cars.supply.html',
              //controller: 'SupplyListController'
          }
      }
  })
  .state('cars.detail.supply.list', {
      parent: 'cars.detail.supply',
      url: '',
      views: {
          '@cars.detail.supply': {
              templateUrl: 'cars.supply.list.html',
              controller: 'SupplyListController'
          }
      }
  })
  .state('cars.detail.supply.add', {
      parent: 'cars.detail.supply',
      url: '/add-supply',
      views: {
          '@cars.detail.supply': {
              templateUrl: 'cars.supply.add.html',
              controller: 'AddSupplyController'
          }
      }    
  })
  </code></pre>
  
  <h2>The view:</h2>
  
  <pre><code>&lt;div&gt;
      ...
  
      &lt;h4 ng-if="car.id"&gt;
          Supplies
  
          &lt;a class="btn btn-default btn-sm pull-right" ui-sref="cars.detail.supply.add({ carId: car.id })"&gt;
              &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; Add supply
          &lt;/a&gt;
  
          &lt;a class="btn btn-default btn-sm pull-right" ui-sref="cars.detail.supply.list({ carId: car.id })"&gt;
              &lt;i class="glyphicon glyphicon-plus"&gt;&lt;/i&gt; List supplies
          &lt;/a&gt;
      &lt;/h4&gt;
      &lt;div ui-view="supplies" class=""&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>I've tried:</strong></p>
  
  <ul>
  <li><a href="https://github.com/nonplus/angular-ui-router-default" rel="nofollow noreferrer">https://github.com/nonplus/angular-ui-router-default</a></li>
  <li>set abstract state for <code>cars.detail.supply</code></li>
  <li>solutions from many SO related questions</li>
  <li>set <code>url = ''</code> as mentioned here <a href="https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state" rel="nofollow noreferrer">https://github.com/angular-ui/ui-router/wiki/Frequently-Asked-Questions#how-to-set-up-a-defaultindex-child-state</a></li>
  </ul>