How to use Angular with HTML5 geolocation native API?

Question

I'm using following code snippet to obtain the current geolocation:

angular.module('HomelandApp').controller('PlacesController', function($scope,$http, $localStorage, uiGmapGoogleMapApi) {

  uiGmapGoogleMapApi.then(function(maps) {

        navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.map = { center: { latitude: pos.coords.latitude, longitude: pos.coords.longitude }, zoom: 17 };
        });
  });
});

The problem I'm facing is that I somehow have to invoke the controller twice in order to get the map rendered. This is happening when using navigator so it's not a pure Angular UI problem.

I guess they're digest cycle Angular against native JS details. How should I fix this issue?

Answer 1

navigator.geolocation is outside of angular core so any scope changes made within it need to notify angular to run a digest to update the view. There are several ways to do that.

Try:

 navigator.geolocation.getCurrentPosition(function (pos) {
            $scope.map = { .... };
            $scope.$apply();
});