title: Angular UI Router - Nested States with multiple layouts
body: <p>I want to have multiple layouts (1-col, 2-col, 3-col) which I want to switch out for different routes based on the layout needed.</p>
  
  <p>I currently have a root state which defaults to using a certain layout and then within that layout contains named ui-view directives for sections such as the header, footer, sidebar etc.</p>
  
  <p>I was just wondering if it is possible to change out the layout for nested states, as it currently does not work and no errors within the console or linter are appearing.</p>
  
  <p>I am currently getting no output in the browser at all which makes me think I have implemented the approach wrong, as all routes aren't inheriting from the route state.</p>
  
  <p>Here's the code:</p>
  
  <p><strong>My-module.js</strong></p>
  
  <pre><code>'use strict';
  
  angular.module('my-module', ['ngResource', 'ui.router'])
    // Routing for the app.
    .config(function ($stateProvider, $urlRouterProvider) {
      $stateProvider
        .state('root', {
          url: '',
          views: {
            'layout': {
              templateUrl: 'partials/layout/1-column.html'
            },
            'header': {
              templateUrl: 'partials/layout/sections/header.html'
            },
            'footer': {
              templateUrl: 'partials/layout/sections/footer.html'
            }
          }
        })
        .state('root.home', {
          url: '/'
        })
        .state('root.signup', {
          url: '/signup',
          views: {
            'step-breadcrumb': {
              templateUrl: 'partials/signup/step-breadcrumb.html'
            }
          }
        })
        ;
  
      $urlRouterProvider.otherwise('/');
    })
    ;
  </code></pre>
  
  <p><strong>Index.html</strong></p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html class="no-js" ng-app="my-module"&gt;
    &lt;head&gt;
      &lt;meta charset="utf-8"&gt;
      &lt;title&gt;My Test App&lt;/title&gt;
      &lt;meta name="description" content=""&gt;
      &lt;meta name="viewport" content="width=device-width"&gt;
  
      &lt;!-- build:css({.tmp,app}) styles/main.css --&gt;
      &lt;link rel="stylesheet" href="styles/main.css"&gt;
      &lt;!-- endbuild --&gt;
  
      &lt;!-- build:js scripts/modernizr.js --&gt;
      &lt;script src="bower_components/modernizr/modernizr.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
    &lt;/head&gt;
    &lt;body&gt;
  
      &lt;div ui-view="layout"&gt;
      &lt;/div&gt;
  
      &lt;!-- build:js({app,.tmp}) scripts/vendor.js --&gt;
      &lt;script src="bower_components/angular/angular.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-resource/angular-resource.js"&gt;&lt;/script&gt;
      &lt;script src="bower_components/angular-ui-router/release/angular-ui-router.js"&gt;&lt;/script&gt;
      &lt;!-- endbuild --&gt;
  
      &lt;script src="scripts/config.js"&gt;&lt;/script&gt;
  
      &lt;!-- build:js({app,.tmp}) scripts/main.js --&gt;
      &lt;script src="scripts/my-module.js"&gt;&lt;/script&gt;
      &lt;!-- inject:partials --&gt;
      &lt;!-- endinject --&gt;
      &lt;!-- endbuild --&gt;
  
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p><strong>1-column.html</strong></p>
  
  <pre><code>&lt;div class="one-column"&gt;
  
    &lt;!-- page header --&gt;
    &lt;div ui-view="header"&gt;
    &lt;/div&gt;
    &lt;!-- / page header --&gt;
  
    &lt;!-- state breadcrumb (optional) --&gt;
    &lt;div ui-view="step-breadcrumb"&gt;
    &lt;/div&gt;
    &lt;!-- / state breadcrumb --&gt;
  
    &lt;!-- page-container --&gt;
    &lt;div class="page-container"&gt;
  
      &lt;!-- main content --&gt;
      &lt;div ui-view="main-content"&gt;
      &lt;/div&gt;
      &lt;!-- / main content --&gt;
  
    &lt;/div&gt;
    &lt;!-- / page-container --&gt;
  
    &lt;!-- page footer --&gt;
    &lt;div ui-view="footer"&gt;
    &lt;/div&gt;
    &lt;!-- / page footer --&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Appreciate the help</p>