title: In Angular ui-router nested state url changes,but template is not loading
body: <p>I am using ui-router for nested states &amp; views. When I click on the link, the URL changes to the URL for the substate, but the template does not load.</p>
  
  <p>For example, when the URL changes to the substate <code>project/settings</code>, the corresponding template <code>project.settings.html</code> is not loading.</p>
  
  <p>Here is an SSCCE courtesy of <a href="http://plnkr.co/edit/RGEapeaYbAAtQYaQXxS0?p=info">Plunkr</a></p>
  
  <p>Below is my code as well:             </p>
  
  <h2>app.js</h2>
  
  <pre><code>myApp.config(function ($stateProvider, $urlRouterProvider){
               $stateProvider
                    .state('project', {
                           url: "/project",
                           views:{
                           "content":{templateUrl: "partials/project.html"},
                           "header":{templateUrl: "partials/header"}
                           }
                         })
  
                    .state('project.settings', {
                            url: "/settings",
                            views:{
                             "content":{templateUrl: "partials/project.settings.html"},
                             "header":{templateUrl: "partials/header"}
                            }
                           }) 
              $urlRouterProvider.otherwise("/")                   
     }); 
  
      /* cheching whether the user is authentic or not*/
  
  
   myApp.run(function($rootScope,$location,$cookieStore,validateCookie,$state) {
        $rootScope.$on('$stateChangeStart',function(event,toState,toParams,fromState){
           if($cookieStore.get('user')){
              validateCookie.authService(function(result,error){
                if(!result){
                   $location.path("/");
                }else{
                  $state.go('project.settings');
                }
              });   
           }
           else{
              $location.path("/"); 
           }
          });
      });
  </code></pre>
  
  <h2>index.html</h2>
  
  <pre><code>                &lt;div ng-controller="userController"&gt;
                      &lt;div ui-view="header"&gt;&lt;/div&gt;
                      &lt;div class="container" ui-view="content"&gt;&lt;/div&gt;
                  &lt;/div&gt;
  </code></pre>
  
  <h2>project.html</h2>
  
  <pre><code>            &lt;div ng-controller="userController"&gt;
                  &lt;div class="details"&gt;
                      &lt;a ui-sref=".settings" class="btn btn-primary"&gt;Settings&lt;/a&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
  </code></pre>
  
  <h2>project.settings.html</h2>
  
  <pre><code>        &lt;h1&gt;Project Setting -State test&lt;/h1&gt;
  </code></pre>