How to access object outside the promised function in angularjs

Question

I am new in angularjs and as starter i have a problem with accessing object outside then function. I have created a factory:

    var injectParams = ['$http'];
    var address = function ($http) {
    var factory = {};

    factory.get = function () {
        return $http({
            method: "POST",
            url: '/address',
            headers: {
                'Content-Type': 'application/json'
            },
            data: {
                service: 'address'
            }
        });
    };
  return factory;
 }

And a controller method:

   function getAddresses() {
        address_factory.get().then(function success(response) {
            $scope.billing = response.data.billing;
            $scope.shipping = response.data.shipping;
            console.log(response.data);

        }, function error(x) {
            console.log(x);
        });
    }
   getAddresses();

The question is how can i access $scope.billing object outside getAddresses function? I have read promises in angularjs but i don't understand how to use...

Answer 1

$scope variables are available outse the promise once everywhere in the controller...

Hence $scope.billing will be accessible in html and controller js both...

Answer 2

$scope.billing is accessible everywhere in the controller and the template bound to that controller. But the value of $scope.billing is dynamic, it is undefined until the factory-get Promise is resolved. To reflect a dynamic nature of $scope.billing in the template you may try following approach:

 function getAddresses() {
    $scope.loading = true;
    address_factory.get().then(function success(response) {
      $scope.billing = response.data.billing;
      $scope.loading = false;
      $scope.error = null;
    }, function error() {
      $scope.loading = false;
      $scope.error = true;
    });
  }
 getAddresses();

and then in the template:

<div ng-if="loading">
  Loading...
</div>
<div ng-if="!loading && error">
  Got an error!
</div>
<div ng-if="!loading && !error">
  Billing: {{billing}}
</div>

---

Also, you may use $scope.$watch in the controller to watch for $scope.billing changes:

// ...
getAddresses();

$scope.$watch('billing', function() {
  // $scope.billing has been changed
  console.log($scope.billing);
});

But I would recommend to do all necessary logic right in the success-callback of the Promise.then call.

Answer 3

$scope means the current scope that is the current area where some-controller.js & the some-view.html is accessible.

If you set any variable to $scope it will be accessible anywhere in the some-controller.js & some-view.html.

Suppose you set ng-controller to any div as <div ng-controller="SomeController">.....</div> . So any thing with $scope like $scope.something is set in controller will be accessible in the controller and withing this div too, because the scope of the controller is this.