Selecting first tab by default when page is loaded in angularJS

I have the following angular code for showing student info in the tabbed format.
Following is the student.html class

<div class="panel panel-default">
    <ul class="nav nav-tabs">
        <li ng-repeat="studentTab in studentList"
            ng-class="{active: selectedStudentTab.name === studentTab.name}">
            <a ng-click="selectStudentTab(studentTab)">{{studentTab.name}}</a>
        </li>
    </ul>
    <div class="panel-body">
        <div class="tab-content">
            <div class="tab-pane active" ng-repeat="studentTab in studentList"
                ng-show="selectedStudentTab.name === studentTab.name">
                <div style="padding: 35px; text-align: left;">
                    <div ng-repeat="project in studentTab.projects">
                    <p><pre>{{project.log}}</pre></p>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Here the tabs are created properly, but the first tab is not selected/active by default on loading of the page and becomes active only on the click event.
Can someone help me to figure out what am I missing? any help is appreciated.

Source: AngularJS