title: Nested views with nested states in AngularJS
body: <p>I'm trying to make nested states, but something is wrong and I can't figure out why.</p>
  
  <p>I have these states in my angular app:</p>
  
  <pre><code>/client (list clients)
  /client/:id (show client)
  /client/new (new client)
  </code></pre>
  
  <p>And now, I'm trying to do:</p>
  
  <pre><code>/client/:id/task (list clients tasks)
  /client/:id/task/new (create new task for this client)
  /client/:id/task/:idTask (show the client task)
  </code></pre>
  
  <p>All the states are working, but the <code>task</code> states is not changing the content.</p>
  
  <p>My <em>index.html</em> with the <code>ui-view "main"</code>:</p>
  
  <pre><code>&lt;section id="container"&gt;
      &lt;header&gt;&lt;/header&gt;
      &lt;sidebar&gt;&lt;/sidebar&gt;
      &lt;section class="main-content-wrapper" ng-class="{'main':collapse}"&gt;
          &lt;section id="main-content"&gt;
              &lt;div ui-view="main"&gt;&lt;/div&gt;
          &lt;/section&gt;
      &lt;/section&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>My <em>client.tpl.html</em> with the ui-view "content":</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;ul class="breadcrumb"&gt;
              &lt;li&gt;&lt;a href ui-sref="home"&gt;Home&lt;/a&gt;&lt;/li&gt;
              &lt;li class="active"&gt;Clients&lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  &lt;div ui-view="content"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My app states:</p>
  
  <pre><code>$stateProvider
      .state('/', {
          url: '/',
          templateUrl: '/app/application/application.tpl.html',
          abstract: true
      })
  
      // CLIENT
      .state('client', {
          url: '/client',
          abstract: true,
          views: {
              'main': {
                  templateUrl: '/app/client/client.tpl.html',
                  controller: 'ClientController'
              }
          }
      })
      .state('client.list', {
          url: '/list',
          views: {
              'content': {
                  templateUrl: '/app/client/client.list.tpl.html',
                  controller: 'ClientListController'
              }
          }
      })
      .state('client.new', {
          url: '/new',
          views: {
              'content': {
                  templateUrl: '/app/client/client.new.tpl.html',
                  controller: 'ClientNewController'
              }
          }
      })
      .state('client.show', {
          url: '/:id',
          views: {
              'content': {
                  templateUrl: '/app/client/client.show.tpl.html',
                  controller: 'ClientShowController',
              }
          }
      })
  </code></pre>
  
  <p>Tasks states</p>
  
  <pre><code>    // TASKS
      .state('client.details', {
          url: '/:idClient',
          abstract: true,
          views: {
              'content': {
                  templateUrl: '/app/task/task.tpl.html',
                  controller: 'TaskController'
              }
          }
      })
      .state('client.details.task', {
          url: '/task',
          views: {
              'content': {
                  templateUrl: '/app/task/task.list.tpl.html',
                  controller: 'TaskListController'
              }
          }
      })
      .state('client.details.task.new', {
          url: '/new',
          views: {
              'content': {
                  templateUrl: '/app/task/task.new.tpl.html',
                  controller: 'TaskNewController'
              }
          }
      })
      .state('client.details.task.show', {
          url: '/:idTask',
          views: {
              'content': {
                  templateUrl: '/app/task/task.show.tpl.html',
                  controller: 'TaskShowController'
              }
          }
      });
  </code></pre>
  
  <p>So, when I click to go to:</p>
  
  <pre><code>/client
  /client/:id
  /client/new
  </code></pre>
  
  <p>Everything works fine, the content change, but, when I click to go to:</p>
  
  <pre><code>/client/:id/task
  /client/:id/task/:idTask
  /client/:id/task/new
  </code></pre>
  
  <p>The content don't change, actually, the content gets empty.</p>
  
  <hr>
  
  <p>UPDATE 1</p>
  
  <p>The link to the task list is in my sidebar, sidebar is a directive:</p>
  
  <p>Directive:</p>
  
  <pre><code>.directive('sidebar', [function () {
      return {
          restrict: 'E',
          replace: true,
          templateUrl: '/common/partials/sidebar.html'
      };
  }])
  </code></pre>
  
  <p>Template:</p>
  
  <pre><code>&lt;aside class="sidebar" ng-class="{'sidebar-toggle':collapse}" ng-controller="SidebarController as sidebar"&gt;
      &lt;div id="leftside-navigation" class="nano"&gt;
          &lt;ul class="nano-content"&gt;
              &lt;li class="active"&gt;
                  &lt;a href ui-sref="home"&gt;&lt;i class="fa fa-dashboard"&gt;&lt;/i&gt;&lt;span&gt;Home&lt;/span&gt;&lt;/a&gt;
              &lt;/li&gt;
              &lt;li class="sub-menu"&gt;
                  &lt;a href ng-click="toggle()"&gt;
                      &lt;i class="fa fa-users"&gt;&lt;/i&gt;
                      &lt;span&gt;Clients&lt;/span&gt;
                      &lt;i class="arrow fa fa-angle-right pull-right"&gt;&lt;/i&gt;
                  &lt;/a&gt;
                  &lt;ul style="height: {{height}}px; overflow: hidden;"&gt;
                      &lt;li ng-repeat="client in session.clients"&gt;
                          &lt;a href ui-sref="client.details.task({id:client.id})"&gt;{{client.name}}&lt;/a&gt;
                      &lt;/li&gt;
                  &lt;/ul&gt;
              &lt;/li&gt;
          &lt;/ul&gt;
      &lt;/div&gt;
  &lt;/aside&gt;
  </code></pre>
  
  <p>The link in <code>ui-sref</code> is: <code>/client/10/task</code></p>
  
  <hr>