javascript - Chart.js in AngularJS tabset does not render -

i using angularjs module based on chart.js display graph. works charm, when display chart in angularjs tabset, graph not render if not first tab.

  <tabset>     <tab heading="tab 1">         <!-- ok -->         <canvas class="chart chart-pie" data="[140, 160]" labels="['d1', 'd2']" legend="true"></canvas>     </tab>     <tab heading="tab 2">         <!-- not render -->        <canvas class="chart chart-pie" data="[140, 160]" labels="['d1', 'd2']" legend="true"></canvas>     </tab>   </tabset> 

this jsfiddle. manage fix ?

thanks

as @martin pointed out, issue of chart.js not showing chart when initiliazed in hidden dom element (its height , width remain @ 0px after showing hidden element).

this issue tracked here.

i share home made solution if blocked components tabs initialized hidden. have created directive in compile canvas element. in order able refresh element when needed (eg when tab opened), watch attribute manually change on tab change in controller.

here directive :

app.directive('graphcanvasrefresh', ['$compile', function($compile) { function link(scope, elem, attrs) {      function refreshdom() {         var markup = '<canvas class="chart chart-pie" id="graph" data="entitygraph.data" labels="entitygraph.labels" legend="true" colours="graphcolours" ></canvas>';         var el = angular.element(markup);         compiled = $compile(el);         elem.html('');         elem.append(el);         compiled(scope);     };      // refresh dom when attribute value changed     scope.$watch(attrs.graphcanvasrefresh, function(value) {         refreshdom();     });      // clean dom on destroy     scope.$on('$destroy', function() {         elem.html('');     }); };  return  {     link: link }; }]); 

dirty hell, working solution can use waiting chart.js update. hope can someone.