How can I use HTML5 geolocation in angularjs

Question

How can I use HTML5 geolocation in angularjs? I can get it using HTML5; but how can I pass it to angularjs scope in controller? any sample jsfiddle will save my day!

Answer 1

I'd suggest abstracting this into a service so your controller doesn't have a dependency on window.navigator, and to avoid the unnecessary use of $scope.$apply(). Here's what I'm using in my project:

angular.module('app', []).factory('geolocationSvc', ['$q', '$window', function ($q, $window) {      'use strict';      function getCurrentPosition() {         var deferred = $q.defer();          if (!$window.navigator.geolocation) {             deferred.reject('Geolocation not supported.');         } else {             $window.navigator.geolocation.getCurrentPosition(                 function (position) {                     deferred.resolve(position);                 },                 function (err) {                     deferred.reject(err);                 });         }          return deferred.promise;     }      return {         getCurrentPosition: getCurrentPosition     }; }]); 

Then I consume it in my controller like this:

function captureUserLocation() {     geolocationSvc.getCurrentPosition().then(onUserLocationFound); } 

Answer 2

you can do something

myApp.controller('fooCtrl', function($scope){   if (navigator.geolocation) {     navigator.geolocation.getCurrentPosition(function(position){       $scope.$apply(function(){         $scope.position = position;       });     });   } }) 

you need to do $scope.$apply to trigger the digest cycle when the geolocation arrives and to update all the watchers.