title: Angular Controller error 'Argument 'MainCtrl' is not a function, got undefined'
body: <p>At some point this afternoon I suddenly got the following AngularJS error: <code>Argument 'MainCtrl' is not a function, got undefined</code></p>
  
  <p>I have a good version still running in Chrome without any errors, so I'm attempting to find the diffs - however to no avail.</p>
  
  <p>I would appreciate any advice on how to fix the error <code>Argument 'MainCtrl' is not a function, got undefined</code></p>
  
  <p>I load the controllers.js file in index.html - within the body section:</p>
  
  <pre><code> &lt;!DOCTYPE html&gt;
   &lt;html ng-app="rage.ui"&gt;
  
   &lt;head&gt;
       &lt;!-- loading css files here... --&gt;
   &lt;/head&gt;
  
   &lt;body ng-controller="MainCtrl as main"&gt;
  
    &lt;!-- Wrapper--&gt;
    &lt;div id="wrapper"&gt;
       &lt;!-- Navigation --&gt;
    &lt;/div&gt;
  
    &lt;script src="app/app.js"&gt;&lt;/script&gt;
    &lt;script src="app/config.js"&gt;&lt;/script&gt;
    &lt;script src="app/js/controllers.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  </code></pre>
  
  <p>Here's the MainCtrl in my controllers.js file (also loaded in index.html) - </p>
  
  <pre><code>* MainCtrl - controller */
  
  (function () {
   'use strict';
   angular.module('rage.ui')
      .controller('MainCtrl', ['$scope', '$interval', '$window', 'widgetDefinitions', main])
      .factory('widgetDefinitions', [widgetDefinitions])
      .value('defaultWidgets', [
      { name: 'random' },
      { name: 'time' },
      { name: 'datamodel' },
      {
          name: 'random',
          style: {
              width: '50%'
          }
      },
      {
          name: 'time',
          style: {
              width: '50%'
          }
      }
      ]);
  
  function main($scope, $interval, $window, widgetDefinitions, defaultWidgets) {
      this.userName = 'Risk user';
      // ...
  }
    function widgetDefinitions(RandomDataModel) {
      return [
        {
            name: 'random',
            directive: 'wt-scope-watch',
            attrs: {
                value: 'randomValue'
            }
        }
        {
            name: 'treegrid',
            templateUrl: 'app/views/templateGadget/treeGrid.html',
            title: "Tree Grid Report",
            attrs: {
                width: '50%',
                height: '250px'
            }
        }
      ];
    }
  
  })();
  </code></pre>
  
  <p>in my attempt to add a new 'gadgetModelFactory' to the malhar Angular-Dashboard framework, I broke my system.
  Here's the good version of my new factory, now fixed:</p>
  
  <pre><code>'use strict';
  
  angular.module('rage').
  factory('gadgetDataModel', function ($scope, WidgetDataModel) {
  function gadgetDataModel() {
      var test = 123;
  }
  
  gadgetDataModel.prototype = Object.create(WidgetDataModel.prototype);
  gadgetDataModel.prototype.constructor = WidgetDataModel;
  
  angular.extend(gadgetDataModel.prototype = {        
      init: function () {
          // to be overridden by subclasses
          var dataModelOptions = this.dataModelOptions;
      },
  
      destroy: function () {
          // to be overridden by subclasses
          WidgetDataModel.prototype.destroy.call(this);
          $interval.cancel(this.intervalPromise);
      }
  });
  
  });
  </code></pre>
  
  <p>and my app.config:</p>
  
  <pre><code>(function () {
  angular.module('rage.ui', [
      'ui.router',
      'ui.bootstrap',
      'ui.dashboard'
  ])
  })();
  </code></pre>