Run controller only first time tab was clicked - AngularJS - html

Question

I'm developing a website for our company, and one of the pages contains several tabs :
I want the loading operation to be done for each tab only once and not every time I click it, because these tabs have some API calls, and reloading takes time.
What is the best way to do it? I'm using Ui-router and ui-sref to move between each tab :
<div class="col-xs-2">
<div class="panel panel-default">
<div class="list-group panel panel-default">
<a ui-sref="dashboards.firstTab" ui-sref-active="active" class="list-group-item" id="firstTab_button">
<i style="color:darkblue" class="fa fa-area-chart"></i> TAB1 </a>
<a ui-sref="dashboards.secondTab" ui-sref-active="active" class="list-group-item" id="secondTab_button">
<i style="color:darkblue" class="fa fa-line-chart"></i> TAB2 </a>
<a ui-sref="dashboards.thirdTab" ui-sref-active="active" class="list-group-item" id="thirdTab_button">
<i style="color:darkblue" class="fa fa-server"></i> TAB3 </a>
</div>
</div>
</div>
<div ui-view class="col-xs-12">
<div class="row">
<div class="col-xs-12" ng-if="vm.isTabOneSelected">
<div ng-include src="'components/Cards/Tabs/TabOne/TabOne.html'"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-if="vm.isTabTwoSelected">
<div ng-include src="'components/Cards/Tabs/TabTwo/TabTwo.html'"></div>
</div>
</div>
<div class="row">
<div class="col-xs-12" ng-if="vm.isTabThreeSelected">
<graph-panel panel-title="TabThree {{vm.isTabThreeSelected}}" chart-config="vm.charts.TabOneChartSite"></graph-panel>
</div>
</div>
</div>

Answer 1

On Each Controller, You can cache your loaded data in a service, and when you load your controller you will start by checking this service if it does not have the data, then you will request it from your APIs , in this case you only request your data once you access the tab for the first time :
eg. your service
app.service('dataService', function() {
this.firstTabData = null;
this.getFirstTabData = function () {
return this.firstTabData;
};
this.setFirstTabData = function (data) {
this.firstTabData = data;
};
});
your controller
app.controller('tabOne', function($scope, dataService) {
$scope.data = {};
$scope.load = function () {
if(dataService.getFirstTabData()) {
$scope.data = dataService.getFirstTabData();
}
else {
$scope.data = getDataFromAPI();
}
};
var getDataFromAPI = function () {
//get your data
dataService.setFirstTabData(dataFromAPI);
};
});