Using $scope variable inside AngularJS script

Question

I am using AngularJS, Ionic Framework and Cordova. I tried to set current user location in the center of the map.

Here is my code:

.controller('mainCtrl', function($scope) {
    $scope.position = "";
    var latLng = {};
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(function(position) {
        $scope.$apply(function() {
          $scope.position = position;
          latLng = {
            'lat': position.coords.latitude,
            'lng': position.coords.longitude
          };
        });
      });
    };
    $scope.map = {
      center: {
        latitude: 51.219053,
        longitude: 4.404418
      },
      ...

I can print current user location this way outside the script:

clat: {{position.coords.latitude}}, clang: {{position.coords.longitude}}

But I want to use it inside the script. I have tried these without any success:

center: { latitude: position.coords.latitude,...
center: { latitude: $scope.position.coords.latitude,...
center: { latitude: latLng.lng,...
center: { latitude: latLng['lng'],...

How can use it inside the script?

---

Error log:

TypeError: Cannot read property 'latitude' of undefined

Answer 1

If you want to initialise googleMaps after getting the coords you can do it nicelly with promises

working plunker

var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope, $q) {
  var deferredBrowserLocation = $q.defer()

  getBrowserLocation = function() {
    navigator.geolocation.getCurrentPosition(function(position) {
      console.log(position.coords)
      deferredBrowserLocation.resolve(position)

    })
    return deferredBrowserLocation.promise
  }

  getBrowserLocation().then(function(position) {
    $scope.map = {
      center: {
        latitude: position.coords.latitude,
        longitude: position.coords.longitude
      }
    }
  }).finally(function(){
    //initialize googlemaps with $scope.map
  })
});

Answer 2

I'm sure this is because you are trying to access coords before it has been set, this happens asynchronously.

It may be that it works elsewhere in the code simply because there is a delay before that code is run, which is enough time for the coordinates to have been set. This is known as a race condition.

You set the values from coords in a callback function as below.

if (navigator.geolocation) {
    navigator.geolocation.getCurrentPosition(function(position){

     //Check coords is not undefined and then build the center object
}

}