Argument 'barChartController' is not a function, got undefined
<p>I am trying to replicate <a href="http://jsfiddle.net/lc5je/" rel="nofollow noreferrer">this example</a> in my code (will change later), but I am getting this error when I try it: <code>Argument 'barChartController' is not a function, got undefined</code>. I am using Angular 1.5.6</p>

<p>This is what my current files look like:</p>

<p><strong>graph.erb</strong> (full file)</p>

<pre><code> &lt;div ng-app='myApp'&gt;
   &lt;div ng-controller='barChartController'&gt;
     &lt;chart ng-model='data'&gt;&lt;/chart&gt;
   &lt;/div&gt;
 &lt;/div&gt;
</code></pre>

<p><strong>flot.js</strong> (full file)</p>

<pre><code>//Module Created
var myApp = angular.module('myApp', []);

//Controller Created
myApp.controller('barChartController', function($scope){

    var daftPoints = [[0, 10]],
        punkPoints = [[1, 20]];

    var data1 = [
        {
            data: daftPoints,
            color: '#00b9d7',
            bars: {show: true, barWidth:1, fillColor: '#00b9d7', order: 1, align: "center" }
        },
        {
            data: punkPoints,
            color: '#3a4452',
            bars: {show: true, barWidth:1, fillColor: '#3a4452', order: 2, align: "center" }
        }
    ];

    $scope.data = data1;


});

//Directive Created
myApp.directive('chart', function(){
    return{
        restrict: 'E',
        link: function(scope, elem, attrs){

            var chart = null,
                options = {
                xaxis: {
                    ticks:[[0,'Daft'],[1,'Punk']]
                },
                grid: {
                  labelMargin: 10,
                  backgroundColor: '#e2e6e9',
                  color: '#ffffff',
                  borderColor: null
                }
              };

            var data = scope[attrs.ngModel];

            // If the data changes somehow, update it in the chart
            scope.$watch('data', function(v){
                 if(!chart){
                    chart = $.plot(elem, v , options);
                    elem.show();
                }else{
                    chart.setData(v);
                    chart.setupGrid();
                    chart.draw();
                }
            });
        }
    };
});
</code></pre>

<p><strong>My CSS File</strong> (appended)</p>

<pre><code>chart {
    display: block;
    width:400px;
    height:200px;
}
</code></pre>

<p>In Layout.erb I have these lines in the head:</p>

<pre><code>&lt;script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.6/angular.min.js"&gt;&lt;/script&gt;
&lt;script src="/js/flot.js"&gt;&lt;/script&gt;
</code></pre>

<p>So it shouldn't be an issue with it not finding the Javascript. I looked all through <a href="https://stackoverflow.com/questions/21673404/error-ngareq-from-angular-controller">this post</a> but none of the answers seemed to fit what I was seeing. I am fairly new to Angular, so any help would be appreciated.</p>