Detect Element Load via Controller in Angularjs

Question

i have a angularjs project and i am using angular-ui (bootstrap) Tabs. my problem is that i am using charting tool with it.

is there any way to detect that the tab has been completely loaded.

<tabset justified="false">
    <tab heading="Yesterday"  ng-controller="yesterdayCtrl" ng-cloak >
        <div ng-include="'templates/tabViews/yesterday.html'" scope="" onload="" ></div>
    </tab>
    <tab heading="Weekly" ng-controller="weeklyCtrl" >
        <div ng-include="'templates/tabViews/weekly.html'" scope="" onload="" ></div>
    </tab>
    <tab heading="Monthly"></tab>
    <tab heading="Yearly"></tab>
</tabset>

each ng-include contains details tabs with lots of charting inside it. the issue is that the charts are not getting displayed when ta is clicked and view. i have to re call all the function to redraw. i see thisis beacause the charts get drawn in the background.

i am using c3.js with d3.js

DrawService.drawSpline =  function(ele,data) {
    c3.generate({
        bindto: '#'+ele,
        data: data
    });
}

Answer 1

temporary fix

<tabset justified="false">
<tab heading="Yesterday"  ng-controller="yesterdayCtrl" ng-click="loadYes()">
<div ng-include="'templates/tabViews/yesterday.html'" scope="" onload="loadYes()" ng-cloak ></div>
</tab>
<tab heading="Weekly" ng-controller="weeklyCtrl" ng-click="loadWeek()">
<div ng-include="'templates/tabViews/weekly.html'" scope=""  ng-cloak></div>
</tab>
<tab heading="Monthly" ng-controller="monthlyCtrl" ng-click="loadMonth()">
<div ng-include="'templates/tabViews/monthly.html'" scope="" n ng-cloak></div>

</tab>
<tab heading="Yearly" ng-controller="yearlyCtrl" ng-click="loadYear()">
    <div ng-include="'templates/tabViews/yearly.html'" scope=""  ng-cloak></div>


</tab>

</tabset>