title: Angular-UI Router: Nested Views Not Working
body: <p>Building a multi-step form (“wizard”). Was originally following <a href="https://scotch.io/tutorials/angularjs-multi-step-form-using-ui-router">this tutorial</a>, which worked great, but am now trying to adapt it so step one is embedded on the homepage rather than being a separate state. No matter what I try, I can not create a <code>ui-sref</code> path that will work. I always get:</p>
  
  <blockquote>
    <p>Could not resolve '.where' from state 'home'</p>
  </blockquote>
  
  <p>or</p>
  
  <blockquote>
    <p>Could not resolve 'wizard.where' from state 'home'</p>
  </blockquote>
  
  <p>or</p>
  
  <blockquote>
    <p>Could not resolve 'wizard.where@' from state 'home'</p>
  </blockquote>
  
  <p>…even though <code>wizard.where@</code> works fine in <code>&lt;div ui-view="wizard.where@"&gt;&lt;/div&gt;</code>. What is the correct syntax?</p>
  
  <p>Here are the relevant files:</p>
  
  <p><strong>home.js</strong> (left comments intact so you can see various methods I’m trying):</p>
  
  <pre><code>var wizard = {
    url: '/home/wizard',
    controller: 'VendorsCtrl',
    templateUrl: 'vendors/wizard.tpl.html'
  };
  
  angular.module( 'myApp.home', [
    'ui.router',
    'ui.bootstrap',
    'myApp.modal',
    'angularMoment'
  ])
  
  .config(function config( $stateProvider, $urlRouterProvider ) {
    $stateProvider
      .state( 'home', {
        url: '/home',
        views: {
          "main": {
            controller: 'HomeCtrl',
            templateUrl: 'home/home.tpl.html'
          },
          "jumbotron": {
            controller: 'HomeCtrl',
            templateUrl: 'home/welcome.tpl.html'
          },
          "wizard": wizard,
          "wizard.where": {
            url: '/home/wizard/where',
            controller: 'VendorsCtrl',
            templateUrl: 'vendors/wizard-where.tpl.html',
            parent: wizard
          },
          "wizard.what": {
            url: '/home/wizard/what',
            controller: 'VendorsCtrl',
            templateUrl: 'vendors/wizard-what.tpl.html',
            parent: wizard
          },
          "wizard.when": {
            url: '/home/wizard/when',
            controller: 'VendorsCtrl',
            templateUrl: 'vendors/wizard-when.tpl.html',
            parent: wizard
          },
        },
        data: { pageTitle: 'Home' }
      })
  
      // route to show our basic form (/wizard)
      // .state('wizard', {
      //   url: '/wizard',
      //   views: {
      //     "main": {
      //       controller: 'VendorsCtrl',
      //       templateUrl: 'vendors/wizard.tpl.html'
      //     }
      //   },
      //   abstract: true,
      //   //data: { pageTitle: 'Vendor Search' }
      // })
  
      // nested states 
      // each of these sections will have their own view
      // url will be nested (/wizard/where)
      // .state('wizard.where', {
      //   url: '/where',
      //   templateUrl: 'vendors/wizard-where.tpl.html'
      // })
  
      // url will be /wizard/when
      // .state('wizard.when', {
      //   url: '/when',
      //   templateUrl: 'vendors/wizard-when.tpl.html'
      // })
  
      // url will be /wizard/vendor-types
      // .state('wizard.what', {
      //   url: '/what',
      //   templateUrl: 'vendors/wizard-what.tpl.html'
      // })
      ;
  
      // catch all route
      // send users to the form page 
      $urlRouterProvider.otherwise('/home/wizard/where');
  })
  </code></pre>
  
  <p><strong>wizard.tpl.html</strong>:</p>
  
  <pre><code>&lt;div class="jumbotron vendate-wizard" ng-controller="VendorsCtrl as vendorsCtrl"&gt;
    &lt;header class="page-title"&gt;
      &lt;h1&gt;{{ pageTitle }}&lt;/h1&gt;
      &lt;p&gt;Answer the following three questions to search available vendors. All answers can be changed later.&lt;/p&gt;
  
      &lt;!-- the links to our nested states using relative paths --&gt;
      &lt;!-- add the active class if the state matches our ui-sref --&gt;
      &lt;div id="status-buttons" class="text-center"&gt;
        &lt;a ui-sref-active="active" ui-sref="wizard.where@"&gt;&lt;span&gt;1&lt;/span&gt; Where&lt;/a&gt;
        &lt;a ui-sref-active="active" ui-sref="wizard.what@"&gt;&lt;span&gt;2&lt;/span&gt; What&lt;/a&gt;
        &lt;a ui-sref-active="active" ui-sref="wizard.when@"&gt;&lt;span&gt;3&lt;/span&gt; When&lt;/a&gt;
      &lt;/div&gt;
    &lt;/header&gt;
  
    &lt;!-- use ng-submit to catch the form submission and use our Angular function --&gt;
    &lt;form id="signup-form" ng-submit="processForm()"&gt;
  
      &lt;!-- our nested state views will be injected here --&gt;
      &lt;div id="form-views" ui-view="wizard.where@"&gt;&lt;/div&gt;
    &lt;/form&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>wizard.where.tpl.html</strong>:</p>
  
  <pre><code>&lt;div class="form-group"&gt;
    &lt;label class="h2" for="where"&gt;Where Is Your Wedding?&lt;/label&gt;
    &lt;p id="vendor-where-description"&gt;If left blank, vendors in all available locations will be shown.&lt;/p&gt;
    &lt;div class="input-group-lg"&gt;
      &lt;input id="where" ng-model="formData.where" class="form-control" type="text" placeholder="Boston, MA" aria-describedby="vendor-where-description" /&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;ul class="list-inline"&gt;
    &lt;li&gt;
      &lt;a ui-sref="wizard.what@" class="btn btn-block btn-primary"&gt;
        Next &lt;span class="fa fa-arrow-right"&gt;&lt;/span&gt;
      &lt;/a&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>