AngularJs - ui-router nested view not working

Question

I am having difficulty showing a nested view

1. Base App

"name": "app",
"abstract": true,
"url": "",
"views": {
  "root": {
    "templateUrl": "layout.html",
    "controller": "",
    "controllerAs" : ""
  },
  "header@app": {"templateUrl": ""},
  "nav@app": {"templateUrl": ""},

With index page showing:

<div ui-view="root"></div>

With layout page showing:

<div ui-view="header"></div>
<div ui-view="nav"></div> 
<div ui-view="content"></div>

2. content state example

"name": "app.content",
"url": "/content",
"views": {
  "content@app": {
    "templateUrl": "sample1.html",
    "controller": "",
    "controllerAs" : ""
  }
}

3. another content state example

"name": "app.content.inbox",
"url": "/inbox",
"views": {
  "content@app": {
    "templateUrl": "sample2.html",
    "controller": "",
    "controllerAs": ""
  }
}

Up until this point everything works fine

Sample2.html has a nested view and the html for that page looks like this:

<div ui-view="folder"></div>

And the state being this:

"name": "app.content.inbox.folder",
"url": "/inbox/:folder",
"views": {
  "[email protected]": {
    "templateUrl": "folder.html",
    "controller": "",
    "controllerAs": ""
  }
}

I am not getting the folder.html nested view. Can anyone see my error?

Answer 1

The state should be like this (I commented original incorrect parts, changes are below them):

"name": "app.content.inbox.folder",
//"url": "/inbox/:folder",
"url": "/:folder",
"views": {
  //"[email protected]": {
  "[email protected]": {
    "templateUrl": "folder.html",
    "controller": "",
    "controllerAs": ""
  }
}

In fact, if the view targets named view of its parent even this would work

"views": {
  //"[email protected]": {
  // "[email protected]": { // correct but redundant
  "folder": {                    // that is enough, parent will be searched by default