图表在Angular中无法正确呈现

Question

I've got a project that uses routing, currently with only one page. I pass that page this controller:

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];


});

Then, I've got a lot of inputs (two for each month, so there are 24) that work similarly to this, some aiming to "gastos" and others to "ganancias":

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

(ignore the type="email", it's just for a css-bootstrap rule).

These are my imports:

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

This should work, right? When I load the page, I see the inputs with the 0 values from the arrays. If I change values on the controller, they get shown on the inputs too, so the binding works properly.

Problem is, that these two charts never render, they only instantiate little white squares:

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

Here you have an image to check how it actually looks: http://i.imgur.com/aY4iBsK.png (there's still a lot of work to be done, that's why the page design sucks so much!).

I'd love to get some help with this, since I don't understand what's happening here...

edit:

In case you ask for the main module:

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

It was just the input type="email" which was corrupting the number value. Now they render properly!