title: AngularJS/Jade Error: Argument 'MyController' is not a function, got undefined (MEAN)
body: <p>I know variations of this question have already been asked several times, but I've tried several suggested solutions for other OPs, haven't been able to resolve this, and would appreciate some clarification.</p>
  
  <p>I'm working with the basic mean todo list app (<a href="http://www.mean.io/" rel="noreferrer">http://www.mean.io/</a>). After implementing a simple controller I'm running into the "Error: Argument 'nameOfMyController' is not a function, got undefined."</p>
  
  <p>Here's where I'm at:</p>
  
  <p>app.js (boilerplate)</p>
  
  <pre><code>window.app = angular.module('mean', ['ngCookies', 'ngResource', 'ui.bootstrap', 'ui.route', 'mean.system', 'mean.articles' ]);
  
  angular.module('mean.system', []);
  angular.module('mean.articles', []);
  </code></pre>
  
  <p>I've tried modifying what's referenced here, like, for example, adding mean.controller to the array but that clearly isn't the right way to do it because it tells me the module doesn't exist.</p>
  
  <p>here's my taskController.js (a mean tutorial I followed made taskController a standalone function but I'm declaring it as a constructor the way angular's docs say to) </p>
  
  <pre><code>var mean = angular.module('mean',[]);
  
  mean.controller('taskController', function taskController($scope){
  
     $scope.todos = [];
  
     $scope.doneFilter = { done : true };
     $scope.notDoneFilter = { done : false };
  
     $scope.setTodos = function(todos){
         $scope.todos = todos;
     };
  
  });
  </code></pre>
  
  <p>I also tried angular.module('mean.system').controller('taskController', function taskController($scope){ ... }, same result.</p>
  
  <p>ok now for the views: included ng-app in default.jade </p>
  
  <pre><code>!!! 5
    html(ng-app='mean', lang='en', xmlns='http://www.w3.org/1999/xhtml', xmlns:fb='https://www.facebook.com/2008/fbml', itemscope='itemscope', itemtype='http://schema.org/Product')
      include ../includes/head
      body
       ...
       include ../includes/foot
  </code></pre>
  
  <p>then in index.jade I have:</p>
  
  <pre><code>extends layouts/default
  
  block head
    script(type='text/javascript', src='/js/controllers/taskController.js')
  
  block content
    section(data-ng-view)
    div.container(ng-controller="taskController", ng-init="setTodos( #{JSON.stringify(todos)} )")
    ...
    div.row(ng-repeat="todo in todos | filter:notDoneFilter")
      label.checkbox
        input(type="checkbox", ng-model="todo.done")
        | {{ todo.description }}
      span.datestring
        i {{ todo.due | date: 'MMM d, yyyy' }}    
    ...
    div.row(ng-repeat="todo in todos | filter:doneFilter")
      label.checkbox
        input(type="checkbox", checked="true")
          del {{ todo.description }}
        span.datestring
          i {{ todo.due | date: 'MMM d, yyyy' }}
  </code></pre>
  
  <p>foot.jade inserts:</p>
  
  <pre><code>//AngularJS
  script(type='text/javascript', src='/lib/angular/angular.js')
  script(type='text/javascript', src='/lib/angular-cookies/angular-cookies.js')
  script(type='text/javascript', src='/lib/angular-resource/angular-resource.js')
  </code></pre>
  
  <p>I don't <em>think</em> I'm missing any angular directives and the controller itself should work, so I'm assuming this is a basic app architecture problem where I don't understand how things fit together. Any help would be appreciated.</p>