title: AngularJS $http REST call returns null data
body: <p>I have a REST service that returns a JSON object. I am trying to make the authentication but it responses with empty data.</p>
  
  <p>I did notice that the call is asychronous and when the user is pressing the login button it makes the call before getting the username and password. So I decided to use the $q constructor in order to fix it, but the problem consists, it still returns null data.</p>
  
  <p>What am I doing wrong?</p>
  
  <p>Thanks in advance.</p>
  
  <p><em>factory</em></p>
  
  <pre><code>angular.module('myApp', ['ngRoute'])
  
  .factory('User', ['$http', '$q', function($http, $q) {
  
      return {
      login: function(username, password) {
          var deferred = $q.defer();
  
          $http.post('http://localhost:8080/CashInRestServices_war/rest/user/login', {username: username, password: password})
              .then (function(data, status, headers, config){
                  deferred.resolve(data);
              }, function(data, status, headers, config) {
                  deferred.reject(data);
              })
          return deferred.promise;
          }   
      }
  }])
  </code></pre>
  
  <p><em>controller</em></p>
  
  <pre><code>.controller('MainCtrl', ['$scope', 'User', function($scope, User) {
  
      $scope.username = "viewer";
      $scope.password = "viewer";
  
      $scope.login = function() {
          User.login($scope.username ,$scope.password)
              .then(function(response) {
                  console.log("success!");
                  $scope.status = response.status;
                  $scope.data = response.data;
                  $scope.username = response.username;
                  alert("Success!!!    " + JSON.stringify({data: response.data}));
          }, function (response) { 
                  $scope.data = response.data || "Request failed";
                  $scope.status = response.status;
                  console.log("Error!!!");
                  alert( "failure message: " + JSON.stringify({data: response.data}));
          })
      };
  }])
  </code></pre>
  
  <p>*****EDIT*****</p>
  
  <p>I did change the code a little bit. I think the problem was how the $http was written.</p>
  
  <p><em>factory</em> </p>
  
  <pre><code>angular.module('myApp', ['ngRoute'])
  
  .factory('User', ['$http', function($http) {
  return {
      login: function(username, password) {
  return $http({method:'post', url: 'http://localhost:8080/CashInRestServices_war/rest/user/login', username: username, password: password})
          }   
      }
  }])
  </code></pre>
  
  <p>It did somehow worked but it returns loginCheck:false. It seems that it does not recognize the correct username and password.</p>
  
  <pre><code>response = Object {data: Object, status: 200, config: Object, statusText: "OK"}
  </code></pre>
  
  <p>log:</p>
  
  <pre><code>Object {data: Object, status: 200, config: Object, statusText: "OK"}config: Objectheaders: Objectmethod: 
  
  "POST"paramSerializer: (b)password: "viewer"transformRequest: Array[1]transformResponse: Array[1]url: "http://localhost:8080/CashInRestServices_war/rest/user/login"username: "viewer"__proto__: Objectdata: ObjectloginCheck: false__proto__: 
  
  Objectheaders: (c)arguments: (...)caller: (...)length: 1name: ""prototype: Objectconstructor: (c)__proto__: Object__proto__: ()&lt;function scope&gt;ClosureClosureGlobal: Windowstatus: 200statusText: "OK"__proto__: Object__defineGetter__: __defineGetter__()__defineSetter__: __defineSetter__()__lookupGetter__: __lookupGetter__()__lookupSetter__: __lookupSetter__()
  
  constructor: Object()hasOwnProperty: hasOwnProperty()isPrototypeOf: isPrototypeOf()propertyIsEnumerable: propertyIsEnumerable()toLocaleString: toLocaleString()toString: toString()valueOf: valueOf()get __proto__: get __proto__()set __proto__: set __proto__()
  </code></pre>