Untitled

<!DOCTYPE html>
<html>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.6.1/angular.js"></script>
<script src="http://unpkg.com/angular-ui-router@1.0.0-rc.1/release/angular-ui-router.js"></script>
<script src="app.js" type="text/javascript"></script>
<body ng-app="app">
  <ui-view></ui-view>
</body>
</html>

app = angular.module('app', [
    'ui.router'
  ]);
app.config(function($stateProvider, $urlRouterProvider) {
  $urlRouterProvider.otherwise('/');
  $stateProvider
    .state('index', {
      url: '/',
      redirectTo: 'a',
      controller: function ($scope, $state) {
        $scope.state = $state;
      }
    })
    .state('a', {
      parent: 'index',
      url: 'a',
      views: {
        '': {
          templateUrl: 'a.html'
        },
        '@a': {
          template: '<p>a</p>'
        },
        'sidebar@a': {
          templateUrl: 'menu.html'
        }
      }
    })
    .state('a.b1', {
      url: '/b1',
      redirectTo: 'a.b1.c',
      template: '<div ui-view></div>',
      data: {
        menu: [
            {url: '.b1.c', title: 'c'},
            {url: '.b1.d', title: 'd'}
          ]
      }
    })
    .state('a.b1.c', {
      template: '<p>b1.c</p>'
    })
    .state('a.b1.d', {
      url: '/d',
      template: '<p>b1.d</p>'
    })
    .state('a.b2', {
      url: '/b2',
      redirectTo: 'a.b2.c',
      template: '<div ui-view></div>',
      data: {
        menu: [
            {url: '.b2.c', title: 'c'},
            {url: '.b2.d', title: 'd'}
          ]
      }
    })
    .state('a.b2.c', {
      template: '<p>b2.c</p>'
    })
    .state('a.b2.d', {
      url: '/d',
      template: '<p>b2.d</p>'
    })
});

<a ui-sref=".b1">b</a>
<a ui-sref=".b2">c</a>

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

<div>
<a ng-repeat="i in state.current.data.menu" ui-sref="{{i.url}}" ng-bind="i.title"></a>
</div>

<ui-view></ui-view>