title: Nested views inside angular ui bootstrap modal
body: <p>Here is the entrypoint of my angularjs application. What I'm trying to create is an modal with multiple views.</p>
  
  <pre><code>(function() {
    'use strict';
  
    angular
      .module('app', ['ui.router', 'ui.bootstrap'])
      .config(function($stateProvider, $urlRouterProvider) {
        $stateProvider
          .state('modal', {
            url: '/modal',
            onEnter: ['$stateParams', '$state', '$modal', function ($stateParams, $state, $modal) {
              $modal.open({
                templateUrl: 'partials/modal.html',
                backdrop: 'static'
              });
            }]
          })
          .state('modal.models', {
            url: '/models',
            templateUrl: 'partials/modal.models.html'
          });
      })
      .run(function ($rootScope) {
        $rootScope.$on("$stateChangeError", console.log.bind(console));
      });
  }());
  </code></pre>
  
  <p>and this is the main view</p>
  
  <pre><code>&lt;!-- Modal --&gt;
  &lt;div id="myModal"&gt;
    &lt;div class="modal-header"&gt;
      &lt;h2&gt;Select your own car&lt;/h2&gt;
    &lt;/div&gt;
    &lt;div class="modal-body"&gt;
      &lt;h4&gt;Brands&lt;/h4&gt;
      &lt;a ui-sref="modal.models"&gt;Models&lt;/a&gt;
      &lt;div ui-view&gt;&lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>My problem is that when I click on the link <code>ui-sref</code> nothing happens. Why ui-router doesn't work inside a modal? I should pass in the second view that is the following named <code>modal.models.html</code></p>
  
  <pre><code>&lt;div&gt;
    &lt;h1&gt;Hello&lt;/h1&gt;
  &lt;/div&gt;
  </code></pre>