ui-router - nested states

Issue

We have the following code:

app.js

.state('app.single', {
      url: "/paths/:pathId",
      views: {
        'menuContent' :{
          templateUrl: "templates/path.html",
          controller: 'PathCtrl'
        }
      }
   })

.state('app.single.comments', {
      url: "/comments",
      views: {
        'menuContent' :{
          templateUrl: "templates/comments.html",
          controller: 'CommentsCtrl'
        }
      }
    });
$urlRouterProvider.otherwise('/app/paths');

path.html:

 <a class="tab-item" href="#/app/paths/{{path.pathid}}/comments">
    <i class="icon ion-chatbox"></i>
    View Comments
 </a>

However, when I click on view comment, it doesn't display the view that would be generated by templates/comments.html. It stays on the current view /path/:pathId

Solution

the code within app.js should have been as:

.state('app.single.comments', {
   url: "/comments",
   views: {
     'menuContent@app' :{
       templateUrl: "templates/comments.html",
       controller: 'CommentsCtrl'
     }
   }
 });

Answered By - Wheatley