title: Angular 1.3 + ui-router + generator-ng-poly embedding nested(?) views not working
body: <p>I am new to Angular, ui-router and <a href="https://github.com/dustinspecker/generator-ng-poly" rel="nofollow">generator-ng-poly</a> and am hoping someone can help with what is likely a simple syntax issue.</p>
  
  <p>I am using generator-ng-poly for a new project and working from the "Deep Level Example" with an Angular 1.3 based app using ui-router and HTML.</p>
  
  <p>First I created a "home" module, then a "header" module inside that. So...</p>
  
  <pre><code> yo ng-poly:module home
   yo ng-poly:module home/header
  </code></pre>
  
  <p>Which gives me these two controllers:
  app/home/home.js</p>
  
  <pre><code>    (function () {
    'use strict';
  
    /* @ngdoc object
     * @name home
     * @requires $stateProvider
     *
     * @description
     *
     */
    angular
      .module('home', [
        'ui.router',
        'home.header'
      ]);
  
    angular
      .module('home')
      .config(config);
  
    function config($stateProvider) {
      $stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'home/home.tpl.html',
          controller: 'HomeCtrl',
          controllerAs: 'home'
        });
    }
  
  })();
  </code></pre>
  
  <p>and
  app/home/header/header.js</p>
  
  <pre><code>(function () {
    'use strict';
  
    /* @ngdoc object
     * @name home.header
     * @requires $stateProvider
     *
     * @description
     *
     */
    angular
      .module('home.header', [
        'ui.router'
      ]);
  
    angular
      .module('home.header')
      .config(config);
  
    function config($stateProvider) {
      $stateProvider
        .state('header', {
          url: '/header',
          templateUrl: 'home/header/header.tpl.html',
          controller: 'HeaderCtrl',
          controllerAs: 'header'
        });
    }
  
  })();
  </code></pre>
  
  <p>Now I want to use the "header" from within home.tpl.html and I am struggling with how to do this. From what I understand either</p>
  
  <pre><code>&lt;div ui-view=“header”&gt;&lt;/div&gt;
  </code></pre>
  
  <p>or</p>
  
  <pre><code>&lt;div ui-view=“home.header”&gt;&lt;/div&gt;
  </code></pre>
  
  <p>should work. But neither is. Hours of Googling has not helped since all the examples use the more common $stateProvider format where there are chained states like so:</p>
  
  <pre><code>$stateProvider
        .state('home', {
          url: '/home',
          templateUrl: 'home/home.tpl.html',
          controller: 'HomeCtrl',
          controllerAs: 'home'
        })
        .state('home.header', {
          url:'/header',
          templateUrl: 'home/header/header.tpl.html',
          controller: 'header/header-controller.js',
          controllerAs: 'header'
        });
  </code></pre>
  
  <p>How should I be referencing "header" to have it show up properly inside home.tpl.html?</p>