Графики не отображаются должным образом в Angular

Question

У меня есть проект, который использует маршрутизацию, в настоящее время только с одной страницей. Я прохожу этой странице этот контроллер:

var ctrls = angular.module('controllers', []); 

ctrls.controller('overviewController', function($scope){ 

$scope.meses = ["Enero", "Febrero", "Marzo", "Abril", "Mayo", 
       "Junio", "Julio", "Agosto", "Septiembre", "Octubre", 
       "Noviembre", "Diciembre"]; 
$scope.gastos = [0,0,0,0,0,0,0,0,0,0,0,0]; 
$scope.ganancias = [0,0,0,0,0,0,0,0,0,0,0,0]; 


}); 

Затем, у меня есть много входов (два на каждый месяц, так что есть 24), которые работают так же, как это, некоторые стремятся «Gastos» и другие в "ganancias":

<div class="form-group"> 
     <input type="email" class="form-control" id="" placeholder="Input field" ng-model="gastos[0]"> 
    </div> 

(игнорировать тип = "электронная почта", это просто для CSS-самозагрузки правила).

Это мой импорт:

<script src="plugins/angular-min.js"></script> 
     <script src="plugins/angular-route-min.js"></script> 
     <script src="plugins/chart-min.js"></script> 
     <script src="plugins/angular-chart.js"></script> 
     <script src="js/main.js"></script> 
     <script src="js/controllers.js"></script> 
     <link href="css/angular-chart.css" rel="stylesheet"> 
     <link href="css/bootstrap.min.css" rel="stylesheet"> 
     <link href="css/css.css" rel="stylesheet"> 

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

Проблема в том, что эти две диаграммы никогда не делают, они только инстанцирует маленькие белые квадраты:

<div class="col-6-md chart-area"> 
    <canvas id="doughnut" class="chart chart-doughnut" 
    chart-data="gastos" chart-labels="meses"> 
    </canvas> 
    <canvas id="doughnut" class="chart chart-doughnut" 
    chart-data="ganancias" chart-labels="meses"> 
    </canvas> 
    </div> 

Здесь у вас есть изображение, чтобы проверить, как она выглядит на самом деле: http://i.imgur.com/aY4iBsK.png (есть еще много работы, чтобы быть поэтому дизайн страницы сильно засасывает!).

Я хотел бы получить некоторую помощь в этом, так как я не понимаю, что здесь происходит ...

редактировать:

В случае, если вы попросите главного модуля:

var main = angular.module("main", ['ngRoute', 'controllers', 'chart.js']); 

main.config(['$routeProvider', 
    function($routeProvider) { 
    $routeProvider. 
     when('/overview', { 
     templateUrl: 'templates/overview.html', 
     controller: 'overviewController' 
     }). 
     otherwise({ 
     redirectTo: '/overview' 
     }); 
}]); 

Answer 1

Это был только тип ввода = «электронная почта», который искажал числовое значение. Теперь они выглядят правильно!