Multiple pie chart in one page using angular-chartjs

Question

I am creating a admin dashboard so i need to give two pie chart in the same page. i am using angular-chartjs to create pie charts. Both pie charts are displaying correctly when another pie chart code is commented(ie. both are working fine separately) when i am trying to display both then only second is loading with legend and first pie chart space is blank, only legend is displaying. when i am moving cursor to the blank space then the first chart is coming on screen. Again if i reload the page then only second chart is displaying. Here is my code

 $scope.labels = userList;
      $scope.labels1 = userList;
      $scope.TCollectedActuals = CA;
      $scope.TForecastAmount = FA;

html

<div class="col-md-4" id="chart1">
<div class="panel panel-primary" ng-show="sanClaimAmount.length > 0">
  <div class="panel-heading">
    <h3 class="panel-title">Collected Actuals</h3>
  </div>
  <div class="panel-body">
    <canvas id="ca" class="chart chart-doughnut"
            chart-data="TCollectedActuals" chart-labels="labels"     legend="true">
     </canvas>
   </div>
 </div>
 </div>
  <div class="col-md-4" id="chart2">
  <div class="panel panel-primary" ng-show="sanClaimAmount.length > 0">
  <div class="panel-heading">
    <h3 class="panel-title">Forecast Amount</h3>
  </div>
  <div class="panel-body">
    <canvas id="fa" class="chart chart-doughnut"
            chart-data="TForecastAmount" chart-labels="labels1" legend="true">
     </canvas>
   </div>
 </div>
</div>

i searched on net i got same problems but no answers. Help needed.