title: AngularJS UI-Router - Cannot get a nested state to show the template
body: <p>I don't know what I'm doing wrong, but here's what I want.</p>
  
  <p>To begin with, here's my body:</p>
  
  <pre><code> &lt;body&gt;
      &lt;div ng-app="testApp" ng-controller="MainController" class="container-fluid"&gt;
          &lt;div ui-view class="row"&gt;&lt;/div&gt;
      &lt;/div&gt;
  
    &lt;/body&gt;
  </code></pre>
  
  <p>Now, inside the ui-view, I want some content depending on the URL. First, there will be the home state which will contain other states.</p>
  
  <pre><code> - Home
       - Recent Studies
       - Studies
   - Map
       - Study
  </code></pre>
  
  <p>To do so, I'm trying to create a hierarchy of routes. This would be my home template <em>(home.html)</em>, an abstract one, that would go in the <code>ui-view</code> above:</p>
  
  <pre><code>&lt;div ng-controller="HomeController"&gt;
      &lt;header&gt;
          &lt;div class="row"&gt;
              &lt;div class="col-xs-6"&gt;Test Web Application&lt;/div&gt;
              &lt;div class="col-xs-6"&gt;
                  &lt;p class="pull-right"&gt;Bonjour 
                    &lt;strong&gt;{{currentAccount.name}}&lt;/strong&gt; ! 
                    &lt;a href="#"&gt;Déconnexion&lt;/a&gt;&lt;/p&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/header&gt;
  
      &lt;article class="row"&gt;
          &lt;div ui-view&gt;&lt;/div&gt;
      &lt;/article&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>Here's recent studies <em>(home.recentStudies.html.twig)</em>, that I want to put inside the ui-view of home.html:</p>
  
  <pre><code>&lt;p&gt;Recent studies&lt;/p&gt;
  </code></pre>
  
  <p>Here are the routes definition:</p>
  
  <pre><code>angular.module('testApp').config(['$stateProvider', '$urlRouterProvider',
   function($stateProvider, $urlRouterProvider) {
      $urlRouterProvider.otherwise('/recentStudies');
      $stateProvider
          .state('home', {
              url: '/',
              abstract: true,
              templateUrl: 'partials/home.html'
          })
          .state('home.recentStudies', {
              url: '/recentStudies',
              templateUrl: 'partials/home.recentStudies.html'
          })
          .state('home.studies', {
              url: '/studies',
              templateUrl: 'partials/studies.html'
          })
      ;
  
  }]);
  </code></pre>
  
  <p>My problem is that when I load the application, everything is blank and I don't seem to understand the problem.</p>
  
  <p>It doesn't seem like I can't use templateUrl in plnkr so I transferred the code into template directly:</p>
  
  <p><a href="http://plnkr.co/edit/kGIxPSNXGy2MLLhXFXva?p=preview" rel="nofollow">http://plnkr.co/edit/kGIxPSNXGy2MLLhXFXva?p=preview</a></p>