title: angular-chart.js provider and injectors not working
body: <p>I've been trying to test out angular-chart.js for my current project, but I haven't even been able to get past the installation phase. Following the directions outlined on the <a href="http://jtblin.github.io/angular-chart.js/" rel="nofollow noreferrer">angular-chart.js site</a> (specifically the pie chart example), I added the proper dependencies for all of the components, but I'm still getting errors. Best I can figure is that there's a conflict with another dependency or that I called the injections in the wrong order.</p>
  
  <p>Here's my <code>app.js</code>:</p>
  
  <pre><code>angular.module("datapoint", ['ngSanitize', 'ngCsv', 'chart.js', 'angular-chart.js']);
  </code></pre>
  
  <p>Here's my canvas tag in the <code>HTML</code>:</p>
  
  <pre><code>&lt;canvas id="pie" width="300" height="300" class="chart-canvas chart chart-pie" chart-data="getPieChartData" chart-labels="getPieChartLabels" chart-options="options"&gt;&lt;/canvas&gt;
  </code></pre>
  
  <p>Here's the beginning of my controller, <code>datapointController.js</code>:</p>
  
  <pre><code>var datapoint = angular.module('datapoint', ['ngCookies', 'ngCsv', 'chart.js']);
  datapoint.controller('datapointController', 'PieCtrl', ['$scope', 'datapointFactory', '$cookies', function ($scope, datapointFactory, $cookies) {
  </code></pre>
  
  <p>And for good measure, here's how I call all the scripts in my <code>HTML</code>:</p>
  
  <pre><code>&lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-cookies.js"&gt;&lt;/script&gt;
  &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular-sanitize.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdnjs.cloudflare.com/ajax/libs/ng-csv/0.3.6/ng-csv.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/Chart.js/2.2.2/Chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="https://cdn.jsdelivr.net/angular.chartjs/latest/angular-chart.min.js"&gt;&lt;/script&gt;
  &lt;script src="app.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p>Despite following the directions on the angular-chart.js site, I still get this error:</p>
  
  <p><strong>Error: ng:areq Bad Argument</strong></p>
  
  <p><code>Argument 'datapointController' is not a function, got string</code></p>
  
  <p>Running into this before, I figured it was the placement of <code>PieCtrl</code>, but moving that around in different spots just creates different errors.</p>
  
  <p>Adding <code>'angular-chart.js'</code> to the module in <code>datapointController.js</code> just makes the entire page go blank and creates the error:</p>
  
  <p><strong>Error: $injector:modulerr Module Error</strong></p>
  
  <p><code>Failed to instantiate module datapoint due to:
  Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=a...)</code></p>
  
  <p>And another error I've run into in my fiddling is:</p>
  
  <p><strong>Error: $injector:unpr Unknown Provider</strong></p>
  
  <p><code>Unknown provider: PieCtrlProvider &lt;- PieCtrl &lt;- datapointController</code></p>
  
  <p>And I wasn't sure if <code>PieCtrlProvider</code> was another argument that I had to provide. In any event, I seem to be following the examples on angular-chart.js, only with extra added dependencies for other things on my site. </p>
  
  <p>Thanks for any help with this.</p>