Angular -ui ui-router - using multiple nested views

Question

I am trying to use the nested views function of the ui-router plugin, but have encountered a problem that I do not know how to solve. The code that shows the problem can be found at 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>

Thus, the code activates the state "root.step1.step2" using the $ state.go method ( https://github.com/angular-ui/ui-router/wiki/Quick-Reference#stategoto--toparams--options ) According to the ui-router documentation:

When an application is in a certain state - when the state is "active" - ​​all of its ancestral states are also implicitly active.

, , "root.step1" "root" , , , "viewB" , jsfiddle: A (root. step1) , B (root.step1.step2) . ?

Answer 1

:

ui-view.

, viewA ui-view='viewB', root.step1.step2 root.step1. viewB root.step1, root.step1.step2.