Angular-Chart no representa nada

Estoy construyendo una aplicación usando AngularJS. En esta aplicación, quiero mostrar un gráfico de líneas con algunos datos. Tengo una página con dos "tabs". $scope.graph.visible mi propia implementación para esto: dos botones en la parte superior, $scope.graph.visible boolean que se configura haciendo clic en esos botones.

Esta es la tabla en el HTML:

 <canvas data="{{graph.data}}" labels="{{graph.labels}}" options="{{graph.options}}" legend="{{graph.legend}}" ng-show="{{graph.visible}}"> </canvas> 

En el controller obtuve esto:

  $scope.graph.data = [1, 2, 3, 4, 5, 6, 7, 8]; $scope.graph.labels = ['hoi', 'doei', 'hallo', 'hee', 'hoi', 'doei', 'hallo', 'hee',]; $scope.graph.options = { animation: false }; $scope.graph.legend = true; 

En la fuente de la página veo esto (cuando el gráfico debería ser visible):

 <canvas data="[1,2,3,4,5,6,7,8]" labels="["hoi","doei","hallo","hee","hoi","doei","hallo","hee"]" options="{"animation":false}" series="" colours="" getcolour="" click="" hover="" legend="true" ng-show="true" class="ng-hide" style=""> </canvas> 

EDITAR // Me pregunto por qué tiene la class ng-hide

EDIT2 // Cuando elimino manualmente la class ng-hide , puedo ver un bloque blanco con el inspector web. De lo contrario, no puedo encontrarlo.

EDIT3 // También, cuando agrego class="" en el file HTML, no elimina la class ng-hide .

EDIT4 // http://plnkr.co/edit/2Wr3HvMzcwfQG2tmsJgX?p=preview

No tiene que usar {{}} cuando se trata de datos del ámbito, por lo que debe cambiar así:

 <canvas class="chart chart-line" data="graph.data" labels="graph.labels" series="graph.series" options="graph.options" legend="graph.legend" ng-show="graph.visible"> </canvas> 

Además, los datos deben ser una matriz de matriz como

 $scope.graph.data = [[1, 2, 3, 4, 5, 6, 7, 8]]; 

Ver el Plunker de trabajo aquí (corregido por Grundy en los comentarios): http://plnkr.co/edit/xQ42shTY6qrteNXOYX2F?p=preview