Angular $scope variable is empty and not updated after setting it in HTTP GET

Question

I have $scope.participants = [] as a global variable. My problem is when I used this variable in another function after calling the function below. $scope.participants is empty. However, it isn't when I checked the response.data.

$scope.getParticipants = function(seminar_id,seminar_name,seminar_code) {
    $http({
        method: 'GET',
        dataType: 'JSON',
        params: { 'seminar_id' : seminar_id },
        url: 'getParticipants'
      }).then(function(response) {
          $scope.participants=response.data;
      });
  }

`$http` is the asynchronous call. `$scope.participants` is empty before `$http` returns the data. — Roger Ng, Mar 01 '17 at 02:40
Check whether this can solve your problem. http://stackoverflow.com/questions/18421830/how-to-wait-till-the-response-comes-from-the-http-request-in-angularjs — Roger Ng, Mar 01 '17 at 02:47

raja reddy · Answer 1 · 2017-03-01T15:18:25.427

0

You can check out this working plnkr, you need wait until your promise resolve.

$scope.getParticipants= function(seminar_id,seminar_name,seminar_code){
$http({
    method: 'GET', 
    dataType: 'JSON',
    params: { 'seminar_id' : seminar_id },
    url: 'getParticipants'
  }).then(function(response) {
      $scope.participants=response.data;
      $scope.callBack();
      console.log(response.data);
  });
}
$scope.getParticipants('a','b','c');

edited Mar 01 '17 at 15:18

answered Mar 01 '17 at 02:59

raja reddy

372
2
9

There's no surity that it will complete in 1 sec – Hitesh Kumar Mar 01 '17 at 05:27
I tried this too and it wouldn't get completed in 1 sec. – dan Mar 01 '17 at 06:41
Added call back to notify some function call in the scope on completion of async call. check updated [plnkr](https://plnkr.co/edit/ATlhJvXgW3K0JVMqQCJm?p=preview) – raja reddy Mar 01 '17 at 15:19

Angular $scope variable is empty and not updated after setting it in HTTP GET

1 Answers1