title: Angular ui routers nested ui-views not working
body: <p>I'm trying to create a simple nested route within angular and whenever a nested route occurs the view doesn't pop up</p>
  
  <p>With a path of <code>http://localhost:9000/#/home/hello</code> I still only see  <code>homeHello</code> </p>
  
  <p>Why isn't the nested ui view picking up the home.hello template? </p>
  
  <h2>Rendered HTML</h2>
  
  <pre><code>&lt;section ui-view="" class="ng-scope"&gt;
    &lt;section class="home ng-scope"&gt;
      home
      &lt;a ui-sref=".hello" href="#/home/hello"&gt;Hello&lt;/a&gt;
      &lt;!-- uiView: ui-view --&gt;
      &lt;div ui-view="ui-view" class="ng-scope"&gt;&lt;/div&gt;
    &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <h2>Angular Ui Router</h2>
  
  <pre><code>// app.js
  
  angular.module('spoonFeeder',
    ['ui.router',
     'ngAnimate',
     'ngCookies',
     'ngResource',
     'ngSanitize',
     'ngTouch'])
  
  .config(function($stateProvider, $urlRouterProvider, $locationProvider) {
  
      $urlRouterProvider.otherwise('/home')
  
      $stateProvider
          .state('home', {
              url: '/home',
              templateUrl: 'home/home.html'
          })
          .state('home.hello', {
              url: '/hello',
              templateUrl: 'home/hello.html'
          })
  
          // use the HTML5 History API
          // $locationProvider.html5Mode(true);
  });
  </code></pre>
  
  <h2>Views</h2>
  
  <pre><code>&lt;!-- home/home`.html --&gt;
  &lt;section class="home"&gt;home&lt;a ui-sref=".hello"&gt;Hello&lt;/a&gt;
    &lt;div ui-view="ui-view"&gt;&lt;/div&gt;
  &lt;/section&gt;
  
  &lt;!-- home/hello.html --&gt;
  &lt;section class="hello"&gt;Hello&lt;/section&gt;
  </code></pre>