Ionic / Angular JS - Input fields not updating correctly after using Geolocation

Question

I am building a new App using Ionic / Angular JS. In a specific app tab I am using geolocation to populate 4 fields (street name, street number, lat and long).

Here is how my controller JS looks like for this specific tab:

.controller('PetitionsCtrl', function($scope, $cordovaGeolocation, $log) {

      var posOptions = {timeout: 10000, enableHighAccuracy: false};
      $cordovaGeolocation
      .getCurrentPosition(posOptions)
      .then(function (position) {
        $scope.lat = position.coords.latitude;
        $scope.lng = position.coords.longitude;

        $log.log($scope.lat);
        $log.log($scope.lng);

        $scope.pLat = {value: $scope.lat};
        $scope.pLng = {value: $scope.lng};

        var geocoder = new google.maps.Geocoder();
        var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
        var request = {
          latLng: latlng
        };

        geocoder.geocode(request, function(data, status) {
          if (status == google.maps.GeocoderStatus.OK) {
            if (data[0] != null) {
              $log.log("Strada: " + data[0].address_components[1].long_name);
              $log.log("Numar: " + data[0].address_components[0].long_name);
              $log.log("Localitate: " + data[0].address_components[2].long_name);
              $log.log("Adresa: " + data[0].formatted_address);
              $scope.pStreet = {value: data[0].address_components[1].long_name};
              $scope.pNumber = {value: data[0].address_components[0].long_name};
            } else {
              $log.log("Adresa indisponibila");
            }
          }
        })
      });
})

And here is how the HTML part looks like:

<label class="item item-input">
  <span class="input-label">Strada</span>
  <input type="text" ng-model="pStreet.value">
</label>
<label class="item item-input">
  <span class="input-label">Număr</span>
  <input type="text" ng-model="pNumber.value">
</label>
<label class="item item-input">
  <span class="input-label">Lat</span>
  <input type="text" ng-model="pLat.value">
</label>
<label class="item item-input">
  <span class="input-label">Lng</span>
  <input type="text" ng-model="pLng.value">
</label>

Now as you can see I am using $log to show the information in the console. Now here comes the weird part... In the console, I am getting all the information correctly shown. Also, the <input type="text" ng-model="pLat.value"> and <input type="text" ng-model="pLng.value"> fields are populated but NOT the <input type="text" ng-model="pStreet.value"> and <input type="text" ng-model="pNumber.value"> although, as I said before, the console shows me the right values. Weirder than this, if I go to another tab in my app and return to this tab, all the fields are populated correctly. What can I do? What am I doing wrong here?

Answer 1

Use $scope.$apply() after you assign the value to $scope.pStreet and $scope.pNumber.