title: Angular UI-Router: child using parent's view
body: <p><strong>In story form:</strong></p>
  
  <p>What I am looking for here is a master-detail setup. The master is in list form and when I click on a link (relative to a particular row/record (or Account in this case)) I want to see the details in the main view (literally, the "main" view: <code>&lt;div class="container" ui-view="main"&gt;&lt;/div&gt;</code>).</p>
  
  <p>I want to do this and maintain my URL structure (<code>/accounts</code> for the list of Accounts; <code>/accounts/:id</code> for the detailed version) <strong>but I want the detail view to use the view that the list was using</strong>.</p>
  
  <p><strong>What I currently have</strong></p>
  
  <p><em>index.html</em></p>
  
  <pre><code>...
  &lt;div class="container" ui-view="main"&gt;&lt;/div&gt;
  ...
  </code></pre>
  
  <p><em>accounts.js</em></p>
  
  <pre><code>$stateProvider
      .state ('accounts', {
          url: '/accounts',
          views: {
              'main': {
                  controller: 'AccountsCtrl',
                  templateUrl: 'accounts/accounts.tpl.html'
              }
          },
          data: { pageTitle: 'Account' }
      })
      .state ('accounts.detail', {
          url: '/:id',
          views: {
              'main': {
                  controller: 'AccountDetailCtrl',
                  templateUrl: 'accounts/detail.tpl.html'
              }
          },
          data: { pageTitle: 'Account Detail' }
      });
  </code></pre>
  
  <p>At this point, the <code>/accounts</code> route works as expected. It displays <code>accounts/accounts.tpl.html</code> correctly in the <code>main</code> view. In that <code>html</code> each line in the repeater links it to its appropriate <code>/accounts/:id</code> URL, which I am handling with the nested state <code>accounts.detail</code>.</p>
  
  <p>What is probably obvious to the majority of you who know more than me about this, my <code>accounts.detail</code> will render to the view <code>main</code> <strong>if that named view exists in the template <code>accounts/accounts.tpl.html</code></strong>. That is indeed true.</p>
  
  <p>But that is not what I want. I want the <code>accounts.detail</code> stuff to render in the parent <code>main</code> view; I want the html of <code>accounts/detail.tpl.html</code> to <strong>replace</strong> the html of <code>accounts/accounts.tpl.html</code> found in <code>index.html: &lt;div class="container" ui-view="main"&gt;&lt;/div&gt;</code>.</p>
  
  <p>So how could I accomplish this?</p>
  
  <p><strong>MY SOLUTION IN CONTEXT</strong>
  The trick is, as the answer says, to set up the URL scheme to identify which child state is "default". The way I interpret this code in plain English is that the parent class is abstract with the proper URL and the "default" child class has the "same" URL (indicated by <code>''</code>).</p>
  
  <p>If you need further clarity, just post a comment and I'll share any more guidance.</p>
  
  <pre><code>.config(function config( $stateProvider ) { $stateProvider
      .state ('accounts', {
          abstract: true,
          url: '/accounts',
          views: {
              'main': {
                  templateUrl: 'accounts/accounts.tpl.html',
                  controller: 'AccountsCtrl'
              }
          },
          data: { pageTitle: 'Accounts' }
      })
      .state ('accounts.list', {
          url: '',
          views: {
              'main': {
                  templateUrl: 'accounts/list.tpl.html',
                  controller: 'AccountsListCtrl'
              }
          },
          data: { pageTitle: 'Accounts List' }
      })
      .state ('accounts.detail', {
          url: '/:id',
          views: {
              'main': {
                  templateUrl: 'accounts/detail.tpl.html',
                  controller: 'AccountDetailCtrl'
              }
          },
          data: { pageTitle: 'Account Detail' }
      });
  </code></pre>