title: AngularJs ui-route nested state “could not resolve state” error
body: <p>Here is my route config</p>
  
  <pre><code> $stateProvider.state('layout', {
              abstract: true,
              controller: "MenuCtrl",
              templateUrl: "views/layout/MainLayout.html"
          }).
              state('layout.home', {
                  url: '/',
                  templateUrl: 'views/Main.html',
                  controller: 'MainCtrl'
              }).state('layout.tag.add', {
                  url: '/addTag',
                  templateUrl: 'views/AddTag.html',
                  controller: 'AddTagCtrl'
              })
  </code></pre>
  
  <p>Later I have in my code function:</p>
  
  <pre><code> var goToAddTagPage = function(){
          $state.go('layout.tag.add');
      };
  </code></pre>
  
  <p>When I call this function I get Could not resolve 'layout.tag.add' from state 'layout'. If I rename this to layout.addTag it works correctly. Nested tag causes issue. How I can correctly nest states like that?
  EDIT: I have added empty state</p>
  
  <pre><code>state('layout.tag',{
  
  }).
  </code></pre>
  
  <p>Now exception is gone. However the view is now not rendered. I get empty screen. I try to add abstract : true for state but it didn't helped.This state need some configuration?</p>