title: relative views in a nested route using Angular 1.5 components
body: <p>I am having trouble using relative named views in a nested route using: </p>
  
  <p>Angular 1.5.8 &amp; angular-ui-router 1.0.0-beta.2</p>
  
  <p>In my 'layout.dashboard' state below, I have my views object with keys 'certs' and 'activity'. Each view is linked to a super basic component with an empty controller and a template with some simple text to display....<strong>However, the components in my view object are not displaying.</strong> </p>
  
  <p>According to the docs <a href="https://ui-router.github.io/docs/latest/interfaces/ng1.ng1statedeclaration.html#views" rel="nofollow">here</a>, I should be able to go: </p>
  
  <pre><code>&lt;div ui-view='certs'&gt;&lt;/div&gt; //Should be in parent -&gt; dashboard.tmpl.html
  </code></pre>
  
  <p>But neither of these components are showing up. Where am I going wrong? </p>
  
  <p>app.js</p>
  
  <pre><code>$stateProvider
      .state('login', {
      url: '/login',
          param: {error: null},
          component: 'login'
      })
      .state('layout', {
          abstract: true,
          component: 'layout',
          resolve: {
              User: function (AuthorizeService, $state) {
                      return AuthorizeService.isAuthorized()
                              .catch(function(){
                                   $state.go('login', {error: 'Please Login'});
                              });
              },
               Organizations : function(OrganizationService, UserService){
                   return OrganizationService.getOrgs().then(function(result){
                       OrganizationService.setCurrentOrg(result.data[0]);
                       return result.data;
                   })
               }
          }
      })
      .state('layout.dashboard', {
          url: '/dashboard',
          component : 'dashboard',
          resolve : {
              certifications: function (OrganizationService) {
                  return OrganizationService.getCurrentOrg().then(function(result) {
                      return OrganizationService.getCertifications(result);
                  });
              }
          },
          /******THESE ARE NOT DISPLAYING*********/
          views : { 
              certs : { component: 'certificationsList' },
              activity: { component: 'activityList' }
          }
      })
  </code></pre>
  
  <p>layout.tmpl.html</p>
  
  <pre><code>&lt;div class="container-fluid"&gt;
  
          &lt;div class='header-bar'&gt;
  
              &lt;div class='header-bar_logo'&gt;
                  &lt;a ui-sref="layout"&gt;&lt;img src='assets/images/app-logo.png' alt='' /&gt;&lt;/a&gt;
              &lt;/div&gt;
  
              &lt;div class='header-bar_user'&gt;
                  &lt;div class="avatar"&gt;
                      &lt;img ng-src="{{dash.user.avatar}}" class="profile-photo"&gt;
                  &lt;/div&gt;
                  &lt;div class="info"&gt;
                      &lt;h4 class="name"&gt;{{dash.user.name}}&lt;/h4&gt;
                      &lt;p&gt;{{dash.user.points}}&lt;/p&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;
  
          &lt;section id="main"&gt;
              &lt;div class='main-sidebar'&gt;
  
                  &lt;!-- Browse Certifications, Browse Courses , Account, --&gt;
                  &lt;div ui-sref="layout.dashboard" ui-sref-active="active" class="main-menu-item"&gt;
                      &lt;h3&gt;&lt;i class="fa fa-certificate"&gt;&lt;/i&gt;Certifications&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div ui-sref="dashboard.courses" ui-sref-active="active" class="main-menu-item"&gt;
                      &lt;h3&gt;&lt;i class="fa fa-book"&gt;&lt;/i&gt;Courses&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div ui-sref="dashboard.users" ui-sref-active="active" ng-class="{'disabled': !dash.isAdmin()}" class="main-menu-item"&gt;
                      &lt;h3&gt;&lt;i class="fa fa-user"&gt;&lt;/i&gt;Users&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div ui-sref="dashboard.analytics" ui-sref-active="active" ng-class="{'disabled': !dash.isAdmin()}" class="main-menu-item"&gt;
                      &lt;h3&gt;&lt;i class="fa fa-line-chart"&gt;&lt;/i&gt;Analytics&lt;/h3&gt;
                  &lt;/div&gt;
                  &lt;div ui-sref="dashboard.account" ui-sref-active="active" class="main-menu-item"&gt;
                      &lt;h3&gt;&lt;i class="fa fa-cog"&gt;&lt;/i&gt;Account&lt;/h3&gt;
                  &lt;/div&gt;
  
              &lt;/div&gt;
  
              &lt;div class='main-content-wrapper'&gt;
                  &lt;alert-list&gt;&lt;/alert-list&gt;
                  &lt;ui-view&gt;&lt;/ui-view&gt;
              &lt;/div&gt;
          &lt;/section&gt;
  
      &lt;/div&gt;
  </code></pre>
  
  <p>dashboard.tmpl.html</p>
  
  <pre><code>    &lt;div class="dashboard-wrapper"&gt;
          &lt;h1&gt;Overview&lt;/h1&gt;
          &lt;div class="header"&gt;
              &lt;div class="header-content"&gt;
              &lt;h3&gt;Header News Feed?&lt;/h3&gt;
              &lt;/div&gt;
          &lt;/div&gt;
          &lt;div class="dashboard-content"&gt;
              &lt;div class="left-column"&gt;
                  &lt;div ui-view="certs"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="right-column"&gt;
                  &lt;div ui-view="activity"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>