angularjs - Angular-ui ui-router - using multiple nested views -

i trying out nested views feature of ui-router plugin, faced issue don't know how solve. code shows problem can found @ http://jsfiddle.net/3c9h7/1/ :

  var app = angular.module('myapp', ['ui.router']);    app.config(function($stateprovider) {     return $stateprovider.state('root', {       template: "<div class='top' ui-view='viewa'></div><div class='middle' ui-view='viewb'></div>"     }).state('root.step1', {       url: '',       views: {         'viewa': {           template: '<h1>view a</h1>'         }       }     }).state('root.step1.step2', {       url: '/step2',       views: {         'viewb': {           template: '<h1>view b</h1>'         }       }     });   });    app.controller('mainctrl', [     '$scope', '$state', function($scope, $state) {       $state.transitionto('root.step1.step2');     }   ]);  <div ng-app='myapp' ui-view ng-controller='mainctrl'> </div> 

so, code activates "root.step1.step2" state using $state.go method(https://github.com/angular-ui/ui-router/wiki/quick-reference#stategoto--toparams--options) according ui-router documentation:

when application in particular state—when state "active"—all of ancestor states implicitly active well.

so, expect "root.step1" , "root" active , works expected, "viewb" not filled template can see in jsfiddle sample : top viewa(root.step1) ok, middle viewb(root.step1.step2) empty. doing wrong?

the documentation says:

child states load templates parent's ui-view.

so there should ui-view='viewb' inside viewa template, since parent state of root.step1.step2 root.step1. or viewb should 1 of views of root.step1, , there should no root.step1.step2.