Angular how to redirect to a tab - angularjs

Question

I have a page which has got 5 tabs. There is another page which contains the links pointing to these tabs. Whenever a user clicks a link on this page, corresponding tab should be opened on angular application page.
The tab are working fine when user manunally clicks on a tab but I am unable to find how can I select a tab by default.
Add in app.js:
$routeProvider.when('/trend', {
templateUrl:'partials/trend.html'
}).when('/deepdive', {
templateUrl:'partials/deepdive.html'
}).when('/driversNdrainers', {
templateUrl:'partials/DriversNDrainers.html'
}).when('/timeline', {
templateUrl:'partials/timeline.html'
}).otherwise("/trend");
index page:
<div header></div>
<div class="row">
<div class = "col-md-12" ng-include="'partials/home.html'"></div>
</div>
<div footer></div>
The home controller creates the tabs dynamically.
Home.html
<div class="" fade-in ng-controller="HomeCtrl">
<ul class="nav nav-pills">
<li ng-class="tabClass(tab)" ng-repeat="tab in tabs" tab="tab"><a href="{{tab.link}}" id="{{tab.id}}"
ng-click="setSelectedTab(tab)">{{tab.label}}</a></li>
</ul>
<div ng-view></div>`enter code here`
Controller:
var homectrl = myApp.controller('HomeCtrl', ['$scope', '$routeParams', '$location','$state', function ($scope, $routeParams,$location,$state) {
$scope.tabs = [
{ link : '#/trend', label : 'Trend', id: "trendLink"},
{ link : '#/deepdive', label : 'Deep Dive' , id:"deepdriveLink"},
{ link : '#/driversNdrainers', label : 'Drivers & Drainers', id:"ddLink" },
{ link : '#/timeline', label : 'Timeline' , id: "timelineLink"},
{ link : '#/zoomin', label : 'Zoom In', id: "zoominLink" }
];
$scope.selectedTab = $scope.tabs[0];
$scope.setSelectedTab = function(tab) {
$scope.selectedTab = tab;
};
$scope.tabClass = function(tab) {
return $scope.selectedTab == tab? "active": "";
};
angular.element(document).ready(function () {
$.each($scope.tabs,function(i){
if(this.link==location.hash){
$scope.setSelectedTab(this);
//$state.go("/trend");
return;
}
});
});
}]);
What I see here is that the tab is selected but the content inside tab is not loaded.

Answer 1

Your code inside jQuery is not executed in Angular's digest cycle. Try adding $scope.$apply(); right after $scope.setSelectedTab(this);
To understand why you should do this read: "Scope Life Cycle" at https://docs.angularjs.org/guide/scope

Answer 2

Here is the solution you can refer to stackblitz
I had to do some modification in its function to achieve the result as per my requirement.
modified solution:
moveToSelectedTab(tabName: string) {
for (let i = 0; i < document.querySelectorAll('[aria-selected]').length; i++) {
let element = document.querySelectorAll('[aria-selected="false"]')[i];
if (element != undefined) {
if ((<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).innerHTML == tabName) {
(<HTMLElement>document.querySelectorAll('[aria-selected="false"]')[i]).click();
}
}
}}
HTML
<ul class="nav nav-tabs" id="editorTab" role="tablist">
<li class="nav-item active" role="presentation">
<a class="nav-link active" id="bannerArea-tab" data-toggle="tab" href="#bannerArea" role="tab"
aria-controls="bannerArea" aria-selected="true">General Information</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="cardArea-tab" data-toggle="tab" href="#cardArea" role="tab"
aria-controls="cardArea" aria-selected="false">Banner Content</a>
</li>
<li class="nav-item" role="presentation">
<a class="nav-link" id="mainArea-tab" data-toggle="tab" href="#mainArea" role="tab"
aria-controls="mainArea" aria-selected="false">Main Content</a>
</li>
</ul>
<div class="tab-content" id="editorTabContent">
<div class="tab-pane fade show active col-sm-12" id="bannerArea" role="tabpanel" aria-labelledby="bannerArea-tab">
<div class="form-group">
</div>
<div class="text-right margin-top-xl">
<button class="btn-icon-confirm" (click)="moveToSelectedTab('Banner Content')">Next<i class="material-icons">arrow_forward</i></button>
</div>
</div>
<div class="tab-pane fade show active col-sm-12" id="cardArea" role="tabpanel" aria-labelledby="cardArea-tab">
<div class="form-group">
</div>
<div class="text-right margin-top-xl">
<button class="btn-icon-confirm" (click)="moveToSelectedTab('Main Content')">Next<i class="material-icons">arrow_forward</i></button>
</div>
</div>
<div class="tab-pane fade col-sm-12" id="mainArea" role="tabpanel" aria-labelledby="mainArea-tab">
<div class="text-right margin-top-xl">
<button class="btn-icon-confirm" (click)="moveToSelectedTab('General Information')"><i class="material-icons">check</i></button>
</div>
</div>
</div>