I am new to AngularJS and only aware of the basics of AngularJS. I want to return a value from $http. That is $http should return a value to the global variable of My Application.

I have tried this:

var sessionValues = null;
var AdminController = angular.module('AdminController', []);

AdminController.controller('LoginController', ['$scope', '$http','$location',
function ($scope, $http, $location){
$http({
        method: "post",
        url: "API/MyPage.php",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(data){
        sessionValues = eval(data);
        console.log(sessionValues); /*Returns desired string*/
    }).error(function(){
        $scope.message="Some error has occured";
    });
    console.log(sessionValues); /*Returns null */
  }
]);

I tried using $rootScope, but was not successful.

I understand that this is because it is an asynchronous call, but how can I fetch the value in JS's global variable.?

Can anyone help me about this.?

I am new to AngularJS and only aware of the basics of AngularJS. I want to return a value from $http. That is $http should return a value to the global variable of My Application.

I have tried this:

var sessionValues = null;
var AdminController = angular.module('AdminController', []);

AdminController.controller('LoginController', ['$scope', '$http','$location',
function ($scope, $http, $location){
$http({
        method: "post",
        url: "API/MyPage.php",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(data){
        sessionValues = eval(data);
        console.log(sessionValues); /*Returns desired string*/
    }).error(function(){
        $scope.message="Some error has occured";
    });
    console.log(sessionValues); /*Returns null */
  }
]);

I tried using $rootScope, but was not successful.

I understand that this is because it is an asynchronous call, but how can I fetch the value in JS's global variable.?

Can anyone help me about this.?

• javascript
• ajax
• angularjs

• Have you tried $scope.sessionValues? – Blunderfest Commented Jul 6, 2014 at 12:48
• @Blunderfest: Yes, I tried that too. But not working. – Veer Shrivastav Commented Jul 6, 2014 at 12:55
• @Veer: But...you are storing the value in JS's global variable. What is the problem ??? – gkalpak Commented Jul 6, 2014 at 13:25
• @ExpertSystem: something is wrong with async calls. The value is not delivered to the JS global variable – Veer Shrivastav Commented Jul 6, 2014 at 13:46
• @Veer: Nothing is wrong. You probably have some reading to do on async execution :) The asyncronicity of the $http call means that the global JS variable will be updated at a later time. You just happen to try to access it sooner. – gkalpak Commented Jul 6, 2014 at 14:05

2 Answers 2

The problem is indeed with the async nature of call and when you are trying to access the variable. console.log returns null because it gets called before the $http call is plete.

Firstly we do not pollute the JavaScript global scope, but use services\factory, $rootScope to access data.

In you case if you want to expose a variable to across angular, the easiest way is to use $rootScope. Something like this

AdminController.controller('LoginController', ['$scope','$http','$location','$rootScope'
  function ($scope, $http, $location,$rootScope){
  $http({
        method: "post",
        url: "API/MyPage.php",
        headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    }).success(function(data){
        $rootScope.sessionValues = eval(data);
        console.log($rootScope.sessionValues); /*Returns desired string*/
    }).error(function(){
        $scope.message="Some error has occured";
    });
    console.log($rootScope.sessionValues); /*Returns will always null due to async nature call*/
  }
]);

You then have to access that variable only after it has been filled in the success call back, before that it would be always null. The console.log would always fail.

To know when the variable value has changed you can use AngularJS watch http://www.benlesh./2013/08/angularjs-watch-digest-and-apply-oh-my.html

I think what you want is to retrieve a constant from backend service before application loaded.

You can refer to How to retrieve constants for AngularJS from backend

In your controller, you can get the APP_CONFIG directly.

AdminController.controller('LoginController', ['$scope', '$http','$location','APP_CONFIG'
function ($scope, $http, $location, APP_CONFIG){
});

You can reuse APP_CONFIG at any angular controller, service or factory.