title: Angular and ui-router - How to configure nested state within named view in parent state
body: <p>I am building a webapp that contains some elements that appear on every "page" and one area where the content changes according to which "page" is navigated to. To achieve this,, I'm using ui-router with multiple named views and nested states. My problem comes when I try to nest a state in one of the named views of its parent. I'm thinking I'm not targeting the named view in the parent correctly because nothing in the nested state is displayed.</p>
  
  <pre><code>    $stateProvider
          .state('stc', {
              abstract: true,
              url: '/',
              views: {
                  'shell': {
                       template: '&lt;div ui-view="topbar"&gt;&lt;/div&gt;' +
                                 '&lt;div ui-view="navbar"&gt;&lt;/div&gt;' +
                                 '&lt;div ui-view="content"&gt;&lt;/div&gt;'
                  }
              }
          })
          .state('stc.sections', {
              url: '',
              views: {
                  'topbar@stc': {
                      template: "&lt;p&gt;top bar&lt;/p&gt;"
                  },
                  'navbar@stc': {
                      template: "&lt;p&gt;nav bar&lt;/p&gt;"
                  },
                  'content@stc': {
                      template: '&lt;div ui-view&gt;&lt;/div&gt;'
                  }
              }
          })
          .state('stc.sections.homepage', {
              url: '/',
              template: '&lt;h1&gt;Nested Home Page Content&lt;/h1&gt;'
          });
  </code></pre>
  
  <p>I'm can't figure out how to target the parent's named view: <code>content@stc</code> so that i can nest dynamic content based on the url. In this case, I'm trying to load home page content.</p>
  
  <p>Is there some special notation required to target a named view?</p>