Angular UI router nested views when targeting parent

Question

Given this snippet

$stateProvider
    .state('authorized', {
        abstract: true, 
        template: "<div ui-view='page'>hello</div>"
    })
    .state('task', {
      parent: 'authorized',
      abstract: true,
      url: '/task',
    })
    .state('task.create', {
      url: '/create',
      'views': {
        'page@authorized': {
          template: "word<div ui-view='boom'>replaced</div>",
          views: {
            'boom': {
              template: "up"
            }
          }
        }
      }
    })

I was expecting to see "word up", instead I see "word replaced" - I think I'm misunderstanding how angular ui targets parent states, help appreciated.

Demo plunk: http://plnkr.co/edit/69kdcy?p=preview

Answer 1

I updated that plunker with this change:

    .state('task.create', {
      url: '/create',
      'views': {
          'page@authorized': {
             template: "word<div ui-view='boom'>replaced</div>",
          },
          'boom@task.create': {
              template: "up"
          }
        }
    })

So, what is different? The views definition is on the same level. Because we want to inject boom into current state template, we have to append its name at the end 'boom@task.create'

Check it here

If you do not mind, check this Q & A to see how I try to use nesting for standard layout