Working geolocation example for ngCordova

Can ngCordova and Ionic be made working together?

It seems like a brilliant combination, but I can't seem to get it working for geolocation no matter what combination I try.

I'm using the tabs project template, but I've tried all the others with the same result.

This is my controllers.js file, nothing works except the dialogs....any ideas?

angular.module('starter.controllers', ['ngCordova'])
    .controller('DashCtrl', function($scope,
                $cordovaMedia, $cordovaNetwork, $cordovaToast,
                $cordovaDialogs, $cordovaSpinnerDialog, $cordovaGeolocation) {

        var src = "/android_asset/www/audio/gong.mp3";

        // //
        // var mediaSource = $cordovaMedia.newMedia(src);
        // var promise = mediaSource.promise;
        // var mediaStatus = mediaSource.mediaStatus;
        // var media = mediaSource.media;

        //$cordovaMedia.play(media);

        $scope.showdialog = function(message) {
            $cordovaDialogs.alert(err, 'scopey', 'ok');
        };

    $cordovaGeolocation
       .getCurrentPosition()
       .then(function (position) {
           var lat  = position.coords.latitude
           var long = position.coords.longitude

           $scope.showdialog();
       }, function(err) {
         // Error
         $scope.showdialog();
       });

    $scope.mutherclucker='oooo';

    $scope.SwapIt=function() {
        $scope.mutherclucker = $scope.mutherclucker=='yeah'?'oooo':'yeah';
        //$cordovaSpinnerDialog.show("title","message", false);
        $scope.showdialog();
    };

    // $cordovaToast
    // .show('Here is a message', 'long', 'center')
    // .then(function(success) {
    //   $scope.showdialog();
    // }, function (error) {
    //   $scope.showdialog();
    // });
    //

    var type = $cordovaNetwork.getNetwork();

    //

    var isOnline = $cordovaNetwork.isOnline();

    //

    var isOffline = $cordovaNetwork.isOffline();
})

.controller('FriendsCtrl', function($scope, Friends) {
    $scope.friends = Friends.all();
})

.controller('FriendDetailCtrl', function($scope, $stateParams, Friends) {
    $scope.friend = Friends.get($stateParams.friendId);
})

.controller('AccountCtrl', function($scope) {

});

I can't comment because my reputation is not 50. But I was able to make ngCordova work, more specifically the $cordovaGeolocation service. I was able to gather the latitude and longitude when testing my Ionic app on Chrome Browser as well as running the application in my Galaxy S5 phone.

I have angular version 1.2.23, ngCordova ~0.1.7-alpha, ionic 1.0.0-beta.13, and ionic CLI version 1.2.9.

What versions do you have? The problem might lie there, not sure though.

Edit: Looking at the ngCordova docs and at my own app, one difference that I notice from your setup is that you're not checking if you're device has been loaded and if cordova plugins are available.

Check out the docs: http://ngcordova.com/docs/

I'm using ionic on a nexus5 and after adding, as documentation states, into index.html

<script src="lib/ngCordova/dist/ng-cordova.min.js"></script>
<script src="cordova.js"></script>

Then into app.js inject ngCordova:

angular.module('youApp', [
    'ionic',
    'someService',
    'ngCordova'
])

Using as controller:

(function () {
    'use strict';

    angular.module('geoblog').controller('InfoController', ['$cordovaGeolocation', InfoController]);

    function InfoController($cordovaGeolocation) {
        var vm = this;
        var posOptions = {timeout: 20000, enableHighAccuracy: true}

        vm.where = function(){
            $cordovaGeolocation.getCurrentPosition(posOptions)
            .then(function(position){
                var lat  = position.coords.latitude
                var long = position.coords.longitude
                console.log('lat', lat);
                console.log('long', long);  
            }, function(error){
                console.log('error:', error);
            });

        };
    };
})();

and as html:

<ion-view view-title="Info" ng-controller="InfoController as vm">
  <ion-content>
        <h1>Info</h1>
        <button class="button button-full button-energized" ng-click="vm.where()">Where am I?</button>
  </ion-content>
</ion-view>

It works like a charm, and using chrome (chrome://inspect/#devices) for remote debugging i can see in the console my latlong.