Несколько круговых диаграмм на одной странице с помощью angular-chartjs

Question

Я создаю панель администратора, поэтому мне нужно дать две круговые диаграммы на одной странице. Я использую angular-chartjs для создания круговых диаграмм. Обе круговые диаграммы отображаются правильно, когда комментируется другой код круговой диаграммы (т. Е. Обе работают отлично по отдельности), когда я пытаюсь отобразить обе, тогда только вторая загружается с легендой, а первая область круговой диаграммы пуста, отображается только легенда. когда я перемещаю курсор в пустое пространство, на экране появляется первый график. Опять же, если я перезагрузить страницу, то отображается только второй график. Вот мой код

 $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>

Я искал в сети, у меня те же проблемы, но ответов нет. Нужна помощь.