Selecting first tab by default when page is loaded in angularJS - html

Question

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>
in my studentController.js I have assigned the oth element of studentList to the tab, following is the code:
$scope.init = function () {
$rootScope.initOrRedirectToLandingPage($scope.loadStudents);
};
$scope.studentList = [];
$rootScope.loadStudents = function(){...
};
$scope.selectedStudentTab = $scope.studentList[0];
$scope.selectStudentTab = function (studentTab) {
$scope.selectedStudentTab = studentTab;
};
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.

Answer 1

In your controller after you load the studentList assign the selectedStudentTab to the first item in the list.
$scope.studentList = [...];
$scope.selectedStudentTab = $scope.studentList[0];