ui.router not showing the page [nested view]

I know this is a well asked question but may be my "googleing" skills are not good enough to get me what I want.

So I have a page with ng-view that is the main index.html

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

Now I have a view with a template url of 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>

As the code suggests that in the Controller_A I want three views (sub-views to be correct) each having its own template.

The routing code is this:

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'
            },
        }
    });
});

What chages should I make to make this idea work. I have gone through the tutorials and unfortunately none of them have similar working or may be I'm looking in the wrong space.

Awaiting your input. Regards!

PS: no JS errors are thrown

Have a look at https://github.com/angular-ui/ui-router/wiki/Multiple-Named-Views#view-names---relative-vs-absolute-names. It seems that you are mixing view names like student.profile with the referencing syntax (viewname@statename). So try omitting the student. in your template.

Also you should register your controller in the state config (probably with a common parent state) instead of the template directly...