ng model only updating input after click when using google maps autocomplete

Question

I am receiving a google maps place id from rest api. Then I am using the google maps api to get the place object like this:

var geocoder = new google.maps.Geocoder;
        geocoder.geocode({
            'placeId': data.city
        }, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                if (results[0]) {
                    $scope.place = results[0];
                } else {
                    window.alert('No results found');
                }
            } else {
                window.alert('Geocoder failed due to: ' + status);
            }
        });

I am writing the result inside a scope variable which I am using in the frontend like this:

<label><span>Stadt</span><input type="text" g-places-autocomplete ng-model="place.formatted_address" name="city" class="f-trans"/></label>

I am using kuhnza/angular-google-places-autocomplete from github for the autocomplete function. Somehow now I have got the problem that when the scope variable is set by the function at the top it does not update the input. Only if I click inside the input field and outside of it again it gets updated and the autocomplete function is running without any problem. It does not have to do with the "kuhnza/angular-google-places-autocomplete" tag I am using because if I remove it it still does not work.

Jack · Accepted Answer · 2016-03-16 19:58:46Z

1

You're updating the model outside of angular. So it doesn't realize the value has updated until you interact with angular. Last I checked the easiest way to ensure the update is in the angular digest is wrap it in $timeout (make sure you inject it too).

if (results[0]) {
  $timeout(function() {
    $scope.place = results[0];
  });
} else {
  window.alert('No results found');
}

answered Mar 16, 2016 at 19:58

Jack

21.3k12 gold badges51 silver badges48 bronze badges

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

Collectives™ on Stack Overflow

ng model only updating input after click when using google maps autocomplete

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related