AngularJS и диаграмма JS - выражение не выполняется

Question

У меня есть очень простой c фрагмент кода с канвой (Диаграмма. js) и некоторая информация. Моя проблема в том, что angularjs показывает выражение вместо выполнения кода.

Я уже пытался использовать ng-bind и $scope.$apply(), но это не сработало.

Если я поставлю метку в любом другом месте страницы, она будет работать так, как ожидается. Если бы это было внутри холста, я могу понять, но это снаружи ...

(function() {
  'use strict';

  angular.module('GHoF').controller('CreatorDashboardCtrl', ['$scope', '$http', 'apiBaseURL', function($scope, $http, apiBaseURL) {


    $scope.getCreatorStats = () => {
      $http.get(`${apiBaseURL}/creator/stats?username=${localStorage.getItem('username')}`).then(res => {
          $scope.creatorStats = res.data;
          console.log($scope.creatorStats);
        },
        (err) => {
          console.error(err);
        });
    }
    $scope.getCreatorStats();

    var ctx3 = $('.colors-pie-chart'),
      data3 = {
        type: 'doughnut',
        data: {
          datasets: [{
            data: [37, 47, 16],
            borderWidth: [0, 0, 0],
            backgroundColor: [
              "#7c5ac2",
              "#03f1b6",
              "#108fe9"
            ],
            hoverBackgroundColor: [
              "#7c5ac2",
              "#03f1b6",
              "#108fe9"
            ]
          }]
        },
        options: {
          legend: {
            display: false
          },
          tooltips: {
            enabled: false
          },
          cutoutPercentage: 75
        }
      },
      colorsPieChart = new Chart(ctx3, data3);

  }]);
})();

<div class="colors-pie-chart-wrap">
  <canvas class="colors-pie-chart"></canvas>
  <div class="chart-description">
    <p class="text-header">{{creatorStats.points}}</p>
    <p class="text-header">Points</p>
  </div>
</div>

Любая идея?