Plotly graphs in angular bootstrap tabs

Question

I got a directive that draws a plotly chart in a tab. Put since the tab isn't properly rendered plotly can't set it's size properly

<tab ng-click="barChartControl.render()" ng-controller="ContactController as conCtrl">
  <tab-heading translate="Header"></tab-heading>
  <div class="col-sm-12">
    <bar-chart mode="'stack'" data="distribution.barValues" labels="distribution.barLabels" theme="'rainbow'" header="'SMS Timeline'" control="barChartControl">
    </bar-chart>
  </div>
</tab>

I have made a 2 way binding to it's render function though control="barChartControl"

This calls my render functions when i click the tab but the graph is not rendered in the correct size since the tab is not fully loaded when ng-click is fired. If i click the tab again when the tab is loaded the graph displays perfectly.

Is there anyway to call a function after a tab is "loaded" in angular bootstrap

Answer 1

I fixed it by wrapping my render function in $timeout

HTML

<tab ng-click="renderChart()" ng-controller="ContactController as conCtrl">
  <tab-heading translate="Header"></tab-heading>
  <div class="col-sm-12">
    <bar-chart mode="'stack'" data="distribution.barValues" labels="distribution.barLabels" theme="'rainbow'" header="'SMS Timeline'" control="barChartControl">
    </bar-chart>
  </div>
</tab>

Controller

$scope.barChartControl = {};

$scope.renderChart = function () {
  $timeout(function () {
    $scope.barChartControl.render();
  },0);
};

Directive

scope: {
  control: '='
},

//Link function
scope.internalControl = scope.control || {};
scope.internalControl.render = render;

function render(){
  //Do stuff
}