title: Controller not a function got undefined error message angular js
body: <p>I am a beginner with MEAN Stack development. I was trying out to play around with some angular stuff but got completely messed up the the controllers.
  Here is my main html file</p>
  
  <pre><code>&lt;!--main.html--&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Chirp&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="javascripts/chirpApp.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="stylesheets/style.css"&gt;
    &lt;/head&gt;
    &lt;body ng-app="chirpApp"&gt;
      &lt;div id='main' class="container" ng-controller="mainController"&gt;
        &lt;div class="col-md-offset-2 col-md-8"&gt;
          &lt;div class="clearfix"&gt;
            &lt;form ng-Submit="post()"&gt;
              &lt;input required type="text" class="form-control" placeholder="Your name" ng-model="newPost.created_by" /&gt; 
              &lt;textarea required class="form-control" maxlength="200" rows="3" placeholder="Say something" ng-model="newPost.text"&gt;&lt;/textarea&gt;
              &lt;input class="btn submit-btn pull-right" type="submit" value="Chirp!" /&gt;
            &lt;/form&gt;
            &lt;div id="post-stream"&gt;
              &lt;h4&gt;Chirp Feed&lt;/h4&gt;
                  &lt;div class="post" ng-repeat="post in posts | orderBy:'created_at':true" ng-class-odd="'odd'" ng-class-even="'even'"&gt; 
                    &lt;p&gt;{{post.text}}&lt;/p&gt;
                  &lt;small&gt;Posted by @{{post.created_by}}&lt;/small&gt;
                  &lt;small class="pull-right"&gt;{{post.created_at | date:"h:mma 'on' MMM d, y"}}&lt;/small&gt;
                  &lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have created another html file for registration. here is the code for it.</p>
  
  <pre><code>&lt;!--register.html--&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;title&gt;Chirp&lt;/title&gt;
      &lt;script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js"&gt;&lt;/script&gt;
      &lt;script src="javascripts/chirpApp.js"&gt;&lt;/script&gt;
      &lt;link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.min.css"&gt;
      &lt;link rel="stylesheet" href="stylesheets/style.css"&gt;
    &lt;/head&gt;
    &lt;body ng-app="chirpApp"&gt;
      &lt;div id='main' class="container" ng-controller="authController"&gt;
        &lt;form class="form-auth" ng-submit="register()"&gt;
          &lt;h2&gt;Register&lt;/h2&gt;
          &lt;p class="text-warning"&gt;{{error_message}}&lt;/p&gt;
          &lt;input type="username" ng-model="user.username" placeholder="Username" class="form-control"&gt;&lt;br&gt;
          &lt;input type="password" ng-model="user.password" placeholder="Password" class="form-control"&gt;&lt;br&gt;
          &lt;input type="submit" value="Register" class="btn btn-primary" /&gt;
        &lt;/form&gt;
      &lt;/div&gt;
    &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have created two separate controllers for registration and posts. the first controller works nicely but whenever I am trying to add a second controller I am getting an error message. Here is the code for my controllers.</p>
  
  <pre><code>//chirpApp.js
  var app = angular.module('chirpApp', []);
  
  app.controller('mainController', function($scope){
    $scope.posts = [];
    $scope.newPost = {created_by: '', text: '', created_at: ''};
  
    $scope.post = function(){
      $scope.newPost.created_at = Date.now();
      $scope.posts.push($scope.newPost);
      $scope.newPost = {created_by: '', text: '', created_at: ''};
    };
  });
  
  app.controller('authController', function($scope){
    $scope.user = {username: '', password: ''};
    $scope.error_message = '';
  
    $scope.login = function(){
      //placeholder until authentication is implemented
      $scope.error_message = 'login request for ' + $scope.user.username;
    };
  
    $scope.register = function(){
      //placeholder until authentication is implemented
      $scope.error_message = 'registeration request for ' + $scope.user.username;
    };
  });
  </code></pre>
  
  <p>I am getting the following error in the chrome console :</p>
  
  <pre><code>Error: [ng:areq] http://errors.angularjs.org/undefined/ng/areq?p0=authController&amp;p1=not%20a%20function%2C%20got%20undefined
      at Error (native)
      at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:6:453
      at tb (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:250)
      at Oa (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:18:337)
      at $get (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:61:288)
      at https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:48:476
      at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:7:367)
      at S (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:48:342)
      at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:59)
      at h (https://ajax.googleapis.com/ajax/libs/angularjs/1.2.0/angular.min.js:43:76)
  </code></pre>
  
  <p>main.html works fine and the data is being binded successfully. 
  The issue is with the register.html page. I suppose the authController is not getting binded</p>
  
  <p>Can anyone suggest me the best way of implementing the same? And why the controller is getting undefined?</p>