How to call function when variable is available in angularjs

Question

In geocodePosition function which generates place_id, which is use by service.getDetails in same function(geocodePosition). But problem is that this code is not stop till get place_id and go to service.getDetails which is using place_id, which is not generated yes. So how to wait till place_id is generated.

function geocodePosition(pos){

   geocoder.geocode({ latLng: pos}, function(responses){
     $scope.place_id=responses[0].place_id;
     console.log('$scope.place_id'+$scope.place_id);
   });

  var map=$scope.map.control.getGMap();
  var service = new google.maps.places.PlacesService(map);
  $scope.$watch(function(){
    return $scope.place_id
  }, function(place_id){
    service.getDetails({placeId: place_id}, function(place, status){
      console.log('place'+place);
    });
  });

}//End of geocodePosition

Answer 1

You can $watch your $scope.place_id variable and call the getDetails if changes.

$scope.$watch(function() {
  return $scope.place_id;
}, function(place_id) {
  if (!place_id) {
    return;
  }
  service.getDetails({ placeId: place_id }, function(place, status) {
    console.log('place='+place);
  });
});

Answer 2

As geocoder.geocode is asynchronous: Use $q for introcing promises in your code.

For example:

function geocodePosition(pos){
  q = $q.defer;
  geocoder.geocode({ latLng: pos}, function(responses){
    var place_id=responses[0].place_id;
    console.log('$scope.place_id'+$scope.place_id);
    q.resolve(place_id);
  }
 };

geocodePosition(pos).then(function(place_id){
  //use it here... 
});