AngularJS : Scope issue in $http success callback

Question

I'm using PHP to get data into my factory, which shows correctly in the success callback function within the controller. However, even after assigning the returned data to $scope.customers, it's not there if I do a console.log($scope.customers) after the callbacks, and my view's [ng-repeat] isn't picking it up either.

Any idea why the scope of my data would be restricted to just inside the success callback if I'm assigning the returned data to my $scope object?

var customersController = function($scope, customersFactory) {
  $scope.customers = [];
  customersFactory.getAllData()
    .success(function(customers) {
      $scope.customers = customers;
      console.log($scope.customers); // Object with correct data
    }); // No errors so only showing happy path
  console.log($scope.customers); // empty []
};
customersModule.controller('customersController', ['$scope', 'customersFactory', customersController]);

This is true, and I should have focused my question more with where I mentioned my view's [ng-repeat] not picking up the data, when the returned data is assigned to $scope inside the success. — Keith DC
– Keith DC, Commented Jul 30, 2014 at 20:29

Fourth · Accepted Answer · 2014-07-30 17:52:04Z

2

$http functions happen asynchronously. Thus, calling console.log after the customersFactory.getAllData will always be empty.

console.log($scope.customers); // Object with correct data

is actually happening AFTER

console.log($scope.customers); // empty []

You can trust the success callback to set $scope.customers correctly, you just need your site to understand that it will happen later. If you NEED scope.customers to be populated before the view loads, consider using a resolve on the controller.

answered Jul 30, 2014 at 17:52

Fourth

9,3811 gold badge25 silver badges30 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Keith DC Over a year ago

I thought the view with ng-repeat was tied to the controller, so when the controller is updated, the view is updated as well. I was willing to make the assumption the success() is fine by itself, but the view not updating is what was confusing me when the ng-repeat wasn't showing the data either.

Keith DC Over a year ago

You were right in that the data 'is' in the success, and to just trust and go with that, and that became the basis for my research/debugging. This led to my finding the issue which was in how I was referencing the data. $scope.customers = customers.goodCustomers; // The view had nothing to show because the returned customers array had a sub-array of types of customers. I appreciated delving into and trying out the routing resolve, however, as well as learning about $scope.apply() - obviously for which neither applied, but was a good learning experience.

Jonathan Aquino · Accepted Answer · 2014-07-30 17:50:02Z

0

Isn't

console.log($scope.customers); // empty []

executing before

console.log($scope.customers); // Object with correct data

?

The second one is in a success() callback so it could execute much later than the first one.

answered Jul 30, 2014 at 17:50

Jonathan Aquino

3,8901 gold badge20 silver badges19 bronze badges

1 Comment

Keith DC Over a year ago

The success() is executing later, correct. Which is what I believe @Fourth is referring to.

Collectives™ on Stack Overflow

AngularJS : Scope issue in $http success callback

2 Answers 2

2 Comments

1 Comment

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Linked

Related