generator-angular-fullstack and angular-chart.js not displaying charts

Question

I have been using angular for a while but this is the first time I have tried using yeoman and generator-angular-fullstack. I am trying to use angular-chart.js to display a chart in a view. poll.html loads up with no issues and displays everything correctly with only the chart not showing. Devtools shows status 200 on all documents and I can see that chart.js, angular-chart.js, and angular-chart.css are all being loaded in the correct order. I've attempted to use sample data to see if it was some sort timing issue but the sample data does not work either. Below I have listed the steps taken as well as code snips. Full source: https://github.com/MichaelLeeHobbs/freeTheVote

Thanks in advance!

I used Daftmonk's generator-angular-fullstack for the seed. Next I used bower to install angular-chart.js (bower install --save angular-chart.js)

index.html

  <script src="bower_components/Chart.js/Chart.js"></script>
  <script src="bower_components/angular-chart.js/dist/angular-chart.js"></script>

app.js

angular.module('freeTheVoteApp', [
 'ngCookies',
 'ngResource',
 'ngSanitize',
 'ngRoute',
 'ui.bootstrap',
 'validation.match',
 'chart.js'
])

poll.controller.js

angular.module('freeTheVoteApp')
.controller('PollCtrl', function ($scope, $http) {
   var self = this;
   this.polls = [];

   $http.get('/api/polls').then(function(response) {
     self.polls = response.data;
   });

   $scope.options = ['a', 'b', 'c'];
   $scope.votes = ['3', '5', '13'];
});

poll.html

<navbar></navbar>
<!--
  ownerId: Number,
  name: String,
  options: [String],
  votes: [Number],
  active: Boolean
-->
<div class="mainContent container">
  <div class="row">
    <div class="col-lg-12">
      <div class="col-md-4 col-lg-4 col-sm-6" ng-repeat="aPoll in poll.polls">
        <h3>{{aPoll.name}}</h3>
        <ol>
          <li ng-repeat="options in aPoll.options">{{options}}
            <span> votes: {{aPoll.votes[$index]}}</span>
          </li>
        </ol>
        <canvas id="{{'doughnutChart' + $index}}" class="chart chart-doughtnut" chart-data="votes" chart-labels="options"></canvas>
      </div>
    </div>
  </div>
</div>
<footer></footer>

Answer 1

Directive element should be have data instead of chart-data & labels instead of chart-labels

<canvas id="{{'doughnutChart' + $index}}" 
  class="chart chart-doughtnut" 
  data="votes" 
  labels="options">
</canvas>

And the data should be two dimensional array

$scope.options = [['a', 'b', 'c']];

Plunkr