title: Having troubles with nested states in AngularJS and ui-router
body: <p>Have some troubles with nested states... </p>
  
  <p>I have an application which has a few pages (represented as page templates).
  So, I really need to use nested states. Reading <a href="https://github.com/angular-ui/ui-router" rel="nofollow">documentation</a> and examples was useless...</p>
  
  <p>So the code is here.</p>
  
  <p>This is my states configuration:</p>
  
  <pre><code>myApplication.config(function ($stateProvider, $urlRouterProvider, $httpProvider) {
      $urlRouterProvider.otherwise('/');
  
      $stateProvider
          .state('state1', {
              url: '/state1',
              views: {
                  'content': {
                      templateUrl: /* path to template */
                  },
                  'menu': {
                      templateUrl: /* path to template */
                  },
                  'overlay': {
                      templateUrl: /* path to template */
                  }
              }
          })
          .state('layer', {
              url: '/layer',
              views: {
                  'content': {
                      templateUrl: /* path to template */
                  },
                  'menu': {
                      templateUrl: /* path to template */
                  }
              }       
          })
          .state('layer.message', {
              url: '/message',
              views: {
                  'overlay': {
                      templateUrl: /* path to template */
                  }
              }
          });
  });
  </code></pre>
  
  <p>And this is my HTML view:</p>
  
  <pre><code>&lt;html&gt;
      &lt;body ng-app="myApplication" ng-controller="AppCtrl"&gt;
          &lt;div id="wrapper"&gt;
              &lt;!-- Here is some not interesting stuff --&gt;
          &lt;/div&gt;
  
          &lt;!-- But here is the most exciting things --&gt;
          &lt;div id = "overlay" ui-view="overlay"&gt;&lt;/div&gt;
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>As you can see I have a state 'layer' and a substate 'layer.message' in this substate I just want to load one extra template which is called <code>overlay</code> and wrap it in a <code>div</code> tag, like in 'state1'.
  But all my tries are failed. The firebug debugging tool shows me that template was loaded via GET query. But it doesn't appear in HTML model and therefore it doesn't render. In 'state1' everething is ok.
  I believe I'm doing something wrong with nasted states... Any suggestions?</p>