угловые вложенные представления не работают

Я хочу создать почтовое клиентское приложение, в котором пользователь сначала увидит панель входа в систему, а затем будет перенаправлен на основное представление с несколькими другими видами внутри. Как полученные электронные письма, удаленные, спам-экт. Для этого я использовал ui-router и вложенные представления, а мой код конфигурации выглядел следующим образом:

app.config(function($stateProvider, $urlRouterProvider){
$urlRouterProvider.otherwise('/login');

$stateProvider
.state('/',{
    url: '/login',
    templateUrl: 'views/login.html',
    controller: 'loginCTRL'
})
.state('main',{
    url: '/main',
    templateUrl: 'views/mainView.html',
    controller: 'MailCtrl'

}),
.state('main.received', {
    url: '/received',
    templateUrl: '/views/received.html' ,
    controller: 'receivedCTRL'
     })

     })
.state('main.spam', {
    url: '/spam',
    templateUrl: '/views/spam.html',
    controller: 'spamCTRL' 

     })
.state('main.removed', {
    url: '/removed',
    templateUrl: '/views/removed.html',
    controller: 'removedCTRL' 

     })
.state('main.message', {
    url: '/message',
    templateUrl: '/views/FullMessage.html',
    controller: 'MailCtrl' 

     }) });

Но вместо отображения всех вложенных представлений на моей панели электронной почты он отправляет меня обратно в режим входа в систему. Все пути верны.