Chartjs-Angular directive is not working with chartjs

angular.module("app", []).directive('doughnutChart', function($timeout) {
  return {
    restrict: 'A',
    scope: {
      name: '@',
      todo: '@',
      inprogress: '@',
      complete: '@'
    },

    link: function(scope, element) {
 
      var doughnutData = {
        labels: ["To do", "In Progress", "Completed"],
        datasets: [{
          data: [scope.todo, scope.inprogress, scope.complete],
          backgroundColor: ["#a3e1d4", "#1be0b8", "#1ab394"]
        }]
      }

      var doughnutOptions = {
        cutoutPercentage: 30,
        responsive: true,
        legend: {
          labels: {
            boxWidth: 20
          }
        },
        title: {
          display: true,
          text: scope.name,
          fontSize: 16,
          fontStyle: 'normal',
          fontColor: '#676a6c'
        }
      };

      $timeout(function() {
        new Chart(element[0].getContext("2d"), {
          type: 'doughnut',
          data: doughnutData,
          options: doughnutOptions
        });
      }, 1000)
    }
  }
}).controller("controller", function($scope) {

  $scope.Projects = [{
    "name": "One",
    "todoTask": 123,
    "inprogressTask": 33,
    "completeTask": 432,
  }, {
    "name": "two",
    "todoTask": 12343,
    "inprogressTask": 3234,
    "completeTask": 42342,
  }]

});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"></script>  
<script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.6.0/Chart.js"></script>
<div ng-app="app" ng-controller="controller">


  <div ng-repeat="project in Projects" ng-if="project.todoTask != 'NaN'">
    <canvas height="100" width="200" doughnut-chart name="{{project.name}}" todo="{{project.todoTask}}" inprogress="{{project.inprogressTask}}" complete="{{project.completeTask}}" width="250" height="250"></canvas>
  </div>
  </div>