Not able to render charts in angular material grid list

Question

I am new to chart.js and trying to plot charts in angular material grid list.I am using angular-chart.js and chart.js.I have included these from CDN <script src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/1.0.2/Chart.min.js"></script> <script src="http://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"></script>

and I have no errors. The chart is not getting plotted and I dont understand where I am going wrong.

app.controller('chartctrl',function($scope,$timeout){
 
 $timeout(function(){
 $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]
  ];
 },1000);
  $scope.onClick = function (points, evt) {
    console.log(points, evt);
  };
  $scope.datasetOverride = [{ yAxisID: 'y-axis-1' }, { yAxisID: 'y-axis-2' }];
  $scope.options = {
    scales: {
      yAxes: [
        {
          id: 'y-axis-1',
          type: 'linear',
          display: true,
          position: 'left'
        },
        {
          id: 'y-axis-2',
          type: 'linear',
          display: true,
          position: 'right'
        }
      ]
    }
  };
})

<div ng-cloak="" class="gridListdemoBasicUsage" ng-app="MyApp">
    <md-grid-list md-cols-xs="1" md-cols-sm="2" md-cols-md="4" md-      cols-gt-md="6" md-row-height-gt-md="1:1" md-row-height="2:2"      md-gutter="12px" md-gutter-gt-sm="8px">

        <md-grid-tile class="gray" md-rowspan="3" md-colspan="2"           md-colspan-sm="1" md-colspan-xs="1">

        <md-card style="height:100%;width:100%">
             <md-card-content>
           <canvas id="line" class="chart chart-line"                         chart-data="data"
        chart-labels="labels" chart-series="series"                       chart-options="options"
        chart-dataset-override="datasetOverride"                           chart-click="onClick">
           </canvas>
          </md-card-content>
         </md-card>
       </md-grid-tile>
    </md-grid-list>
</div>