title: Angularjs: ReferenceError: scope is not defined
body: <p>I'm a beginner with Angularjs, and I have some difficulties understanding modules and scopes. </p>
  
  <p>I keep getting the error that the scope is undefined, but I don't get why. First I had my controller linked where I set my route, but since the function inside the controller is called on submit button click I took it away. I've tried putting it back, but that didn't make any difference.</p>
  
  <p>This is my js file:</p>
  
  <pre><code>var myApp = angular.module('myApp', ['ngRoute']);
  
  // routes
  myApp.config(function($routeProvider) {
      $routeProvider
  
          // route for the home page
          .when('/', {
              templateUrl : 'home.html',
              controller  : 'mainController'
          })
  
          // route for the about page
          .when('/about', {
              templateUrl : 'about.html',
              controller  : 'aboutController'
          })
  
          // route for the login page
          .when('/login', {
              templateUrl : 'login.html'
          });
  });
  
  
  myApp.controller('mainController', function($scope) {
      $scope.message = 'Beginpagina';
  });
  
  myApp.controller('aboutController', function($scope) {
      $scope.message = 'Informatie over deze pagina';
  });
  
  
  function loginCtrl($scope, $http){
      $scope.doLogin = function() {
  
      $http({
  
                  method: 'POST', 
                  url: 'loginController.php',
                  headers: {'Content-Type': 'application/x-www-form-urlencoded'},
                  data: { 
                          'username': $scope.un, 
                          'password': $scope.pw 
                       },
              }).
  
              success(function(data, status) {
  
                  $scope.data = data;
                  if(data == 'FALSE'){
                      $scope.errorMessage = 'Geen geldige inloggegevens';
                  } else {
                     scope.$apply(function() { $location.path("/profile"); });
                  }
  
              }).
  
              error(function(data, status) {
                  $scope.data = data || "FALSE";
                  $scope.errorMessage = 'Something went wrong';
              });
      };
  };
  </code></pre>
  
  <p>And this is my login-page where I get the error, trying to log in:</p>
  
  <pre><code>&lt;div class="span5" ng-controller="loginCtrl"&gt; 
      &lt;form&gt;
         &lt;fieldset&gt;
                &lt;div class="form-group"&gt;
                  &lt;input class="form-control" placeholder="Gebruikersnaam" ng-model="un" 
                    type="text" autocomplete="off"&gt;
                 &lt;/div&gt;
                 &lt;div class="form-group"&gt;
                    &lt;input class="form-control" placeholder="Password" ng-model="pw"  
                      type="password" value="" autocomplete="off"&gt;
                 &lt;/div&gt;
                 &lt;input class="btn btn-lg btn-success btn-block" type="submit" 
                   ng-click="doLogin()" value="Login"&gt;
                 &lt;div&gt;{{errorMessage}}&lt;/div&gt;
             &lt;/fieldset&gt;
         &lt;/form&gt;
     &lt;/div&gt;
  </code></pre>
  
  <p>I don't know if I should post the index-page as well, since the routing for home/about page works fine, so the problem is somewhere making the logincontroller and linking it to my submit button. I have found some similar questions, but I haven't seen anyone mix a new controller with myApp controllers, so I might be doing it completely wrong. I've also read that one html page can only have one module, so I didn't know if I could put the login controller apart. It would be nice to have some more info to be put in the right direction. Thanks in advance!</p>