Angular-chart js not working

Question

Angular chart.js doesn't work as expected. I have tried on codepen and it works: Link

Whereas it doesn't work with my project. The chart doesn't appear on the page. I'm using generator-angular. It doesn't provide any errors in the console. Here's my:

app.js:

angular
  .module('App', [
    'ngAnimate',
    'ngCookies',
    'ngResource',
    'ngRoute',
    'ngSanitize',
    'ngTouch'
  ])
  .config(function ($routeProvider) {
    $routeProvider
      .when('/', {
        templateUrl: 'views/main.html',
        controller: 'MainCtrl',
        controllerAs: 'main'
      })
      .when('/about', {
        templateUrl: 'views/about.html',
        controller: 'AboutCtrl',
        controllerAs: 'about'
      })
      .otherwise({
        redirectTo: '/'
      });
  });

main.html:

<canvas class="chart chart-line" chart-data="data" chart-labels="labels" chart-series="series" chart-click="onClick"></canvas>

main.js:

angular.module('App', ['chart.js'])
       .config(['ChartJsProvider', function (ChartJsProvider) {
          // Configure all charts
          ChartJsProvider.setOptions({
            chartColors: ['#FF5252', '#FF8A80'],
            responsive: false
          });
          // Configure all line charts
          ChartJsProvider.setOptions('line', {
            showLines: false
          });
        }])
       .controller('MainCtrl', ['$scope', '$timeout', function ($scope, $timeout) {
        $scope.labels = ["January", "February", "March", "April", "May", "June", "July"];
        $scope.series = ['Series A', 'Series B'];
        $scope.data = [
          [65, 59, 80, 81, 56, 55, 40],
          [28, 48, 40, 19, 86, 27, 90]
        ];

        $scope.onClick = function (points, evt) {
          console.log(points, evt);
        };

        // Simulate async data update
        $timeout(function () {
          $scope.data = [
            [28, 48, 40, 19, 86, 27, 90],
            [65, 59, 80, 81, 56, 55, 40]
          ];
        }, 3000);
}]);

Things I have included in index.html:

    <!-- build:js(.) scripts/vendor.js -->
    <!-- bower:js -->
    <script src="bower_components/jquery/dist/jquery.js"></script>
    <script src="bower_components/angular/angular.js"></script>
    <script src="bower_components/bootstrap-sass-official/assets/javascripts/bootstrap.js"></script>
    <script src="bower_components/angular-animate/angular-animate.js"></script>
    <script src="bower_components/angular-cookies/angular-cookies.js"></script>
    <script src="bower_components/angular-resource/angular-resource.js"></script>
    <script src="bower_components/angular-route/angular-route.js"></script>
    <script src="bower_components/angular-sanitize/angular-sanitize.js"></script>
    <script src="bower_components/angular-touch/angular-touch.js"></script>
    <script src="bower_components/socket.io-client/socket.io.js"></script>
    <script src="bower_components/angular-socket-io/socket.js"></script>
    <!-- endbower -->
    <!-- endbuild -->

        <!-- build:js({.tmp,app}) scripts/scripts.js -->
        <script src="scripts/app.js"></script>
        <script src="scripts/controllers/main.js"></script>
        <script src="scripts/controllers/about.js"></script>
        <script src="bower_components/chart.js/dist/Chart.bundle.js"></script>
        <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>
        <!-- endbuild -->

Answer 1

I solved this by moving the chartJs config from main.js to app.js and added chart.js as a dependency in app.js.