ui.router не показывает страницу [вложенный вид]

Я знаю, что это хорошо спрошенный вопрос, но может быть, мои навыки "googleing" недостаточно хороши, чтобы получить от меня то, что я хочу.

Поэтому у меня есть страница с ng-view которая является основным index.html

<div class="row" style="margin-top: 70px;" ui-view></div>

Теперь у меня есть представление с шаблоном url student.html

<div class="col-md-10 col-md-offset-1" ng-controller="Controller_Parent">
<div ng-cloak>
    <md-tabs md-dynamic-height md-border-bottom>
        <md-tab label="View Profile" ui-view="student.profile">
        </md-tab>
        <md-tab label="View Results" ui-view="student.result">
        </md-tab>
        <md-tab label="View Attendance" ui-view="student.attendance">
        </md-tab>
    </md-tabs>
</div>
</div>

Поскольку код подсказывает, что в Controller_A я хочу, чтобы три вида (подвыборы были правильными), каждый из которых имел свой собственный шаблон.

Код маршрутизации:

app.config(function($stateProvider, $urlRouterProvider) {    
    $urlRouterProvider.otherwise('/');
    $stateProvider
    .state('home', {
        url: '/',
        templateUrl: 'templates/login.html',
    }).state('student',{
        url:'/student',
        views:{
            '@':{
                templateUrl: 'templates/student.html',
            },
            'profile@student':{
                templateUrl:'templates/student/profile.html'
            },
        }
    });
});

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

Ожидание вашего ввода. С уважением!

PS: нет ошибок JS