title: Use of AngularJS Factory for Authentication
body: <p>New to AngularJS.. I want to build a simple Logon screen using a logon page, utilising a controller (I call it 'AccessCtrl') and service.</p>
  
  <p>I want the controller to make use of a service (I called it 'AuthService'), which will perform the REST call that verifies the username/password, and, will also contain information about the success or failure of that logon attempt.</p>
  
  <p>I want to receive information about the last login attempt (as returned in by the REST call).  For now - just a string which I want to show on the logon screen, (eg 'password invalid' or 'account expired', or 'welcome'). I'm making this a property of the AuthService service which I hope to display.</p>
  
  <p>My view, has a form with username, password and a submit button that calls the controller's login() method. I'm not including it here for brevity. I don't think thats where the problem lies.</p>
  
  <p>To start with, I want to capture when the server is down/unavailable, etc, and also report this, using the same service. To start with - all calls will fail,(because I have an invalid url).</p>
  
  <p>The controller is defined like this:</p>
  
  <pre><code>angular.module('loginApp')
    .controller('AccessCtrl', ['$scope','$http','AuthService', 
      function ($scope,$http,AuthService,Config) {
  
          this.login =function() {
            var user={user:this.username,password:this.password,otherCredentials:this.otherCredentials} ;
  
            AuthService.login(user);
            this.message=AuthService.message;
          };
    }]);
  </code></pre>
  
  <p>My factory service is defined as follows:</p>
  
  <pre><code>.factory('AuthService', ['$http', function ($http) {
        var authService = {};
        var apiRootUrl="http://somesite.com/urany";
  
        authService.login = function (credentials) {
          authService.message="";
          $http.post(apiRootUrl+'/login', credentials)
            .then(
              function (response) {
                  // populate OK message
                  authService.message="Welcome !";
              },
              function (response) {
                  // Currently - all calls fail, as the URI is invalid
                  // I want to trap this.
                  authService.message = "Server unavailable with response status = " + response.status ;      
                  return authService;
  
              },
              function(response) {
                  // this is the notify callback function.
                  // 
              });
        };
  
        authService.isAuthenticated = function () {
          // rerurn true or false if previously authenticated
          return true;
        };
  
        return authService;
  }])
  </code></pre>
  
  <p>;</p>
  
  <p>The problem is that my invalid message ('Server unavailable with response status...') does not appear in my view.</p>
  
  <p>In stepping through the code, the correct authService function is called, but, this does not seem to be populated into the controller/view.</p>
  
  <p>I have a feeling this is a timing issue, where the controller that is executing </p>
  
  <pre><code>this.message=AuthService.message;
  </code></pre>
  
  <p>before the call actually comes back from the post - but I'm not  sure that is the case or how to fix that.</p>
  
  <p>any help/clues welcome.</p>
  
  <p>thanks.</p>
  
  <p>S</p>