Как установить вложенное представление внутри нескольких представлений

У меня есть два именованных представления и безымянное представление следующим образом:

//department.html
<div class="col-md-2">
        <div ui-view="sideBar"></div>
 </div>

 <div class="col-md-10">

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

        <div ui-view></div>

 </div>

И мои маршруты:

.state('Support', {
    url: '/support',
    views: {
       '': { templateUrl: 'app/components/department/department.html'  },

       'sideBar@Support': {
                           templateUrl: 'app/shared/sideBar/sideBar.html',
                           controller: 'SideBarController'
                          },

        'content@Support':{
                           templateUrl: 'app/components/department/support/partial-support.html',
                           controller: 'SupportController'
                          },

      }        
  })


.state('Support.view', {
  url: '/view',
  template: '<b> Hi there nested!!</b>'
});

Что мне нужно :

• localhost/support: это родительский URL-адрес, в этот URL-адрес вводятся два именованных представления (боковая панель и контент), которые работают для меня.
• localhost/support/view: в этом маршрутизаторе я хочу дочернее представление, которое заменит представление content ИЛИ заменит оба множественных представления.

Проблема в том, что у меня не работает вложенный вид, я что-то не так делаю?

PS: я прочитал документацию по ui-router и увидел другие вопросы, но не могу найти похожий сценарий.