AngularJS地理位置数据更新

我正在使用AngularJS做一个移动应用程序。我想要实现的是，一旦我打开GPS，就更新地理位置数据。我该如何做到这一点?我面临的问题是，为了更新数据，我必须导航到其他页面。这些是密码。我正在从一个控制器到另一个控制器共享数据。

.factory('sharedProperties', function () {
    var coordinates = {};
    var getC = function () {
        return coordinates;
    };
    var setC = function (value) {
        coordinates = value;
        return coordinates;
    };
    return {
        getCoords: getC,
        setCoords: setC
    };
})

第一控制器

.controller('MessageController', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
    var nObj = sharedProperties.getCoords();
    console.log(nObj);
        $scope.message = "This is my location: " + nObj.lat + ", " + nObj.lng + ". I'm around " + nObj.acc + " meters from point.";    
}])

第二控制器

.controller("mainController", ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
    $scope.lat = "0";
    $scope.lng = "0";
    $scope.accuracy = "0";
    $scope.error = "";
    $scope.model = {
        myMap: undefined
    };
    $scope.myMarkers = [];
    $scope.showResult = function () {
        return $scope.error == "";
    }
    $scope.mapOptions = {
        center: new google.maps.LatLng($scope.lat, $scope.lng),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP,
        disableDefaultUI: true
    };
    $scope.showPosition = function (position) {
        $scope.lat = position.coords.latitude;
        $scope.lng = position.coords.longitude;
        $scope.accuracy = position.coords.accuracy;
        $scope.$apply();
        sharedProperties.setCoords({
            'lat': position.coords.latitude,
            'lng': position.coords.longitude,
            'acc': position.coords.accuracy
        });
        var latlng = new google.maps.LatLng($scope.lat, $scope.lng);
        $scope.model.myMap.setCenter(latlng);
        $scope.myMarkers.push(new google.maps.Marker({
            map: $scope.model.myMap,
            position: latlng,
            title: 'You are here'
        }));
    }
    $scope.showMarkerInfo = function (marker) {
        $scope.myInfoWindow.open($scope.model.myMap, marker);
    };
    $scope.showError = function (error) {
        switch (error.code) {
        case error.PERMISSION_DENIED:
            $scope.error = "User denied the request for Geolocation."
            break;
        case error.POSITION_UNAVAILABLE:
            $scope.error = "Location information is unavailable."
            break;
        case error.TIMEOUT:
            $scope.error = "The request to get user location timed out."
            break;
        case error.UNKNOWN_ERROR:
            $scope.error = "An unknown error occurred."
            break;
        }
        $scope.$apply();
    }
    $scope.getLocation = function () {
        if (navigator.geolocation) {
            navigator.geolocation.getCurrentPosition($scope.showPosition, $scope.showError,
                                                { enableHighAccuracy: true});
        } else {
            $scope.error = "Geolocation is not supported by this browser.";
        }
    }
    $scope.getLocation();
}])

我设法使它像这样工作。

.controller('MessageController', ['$scope', 'sharedProperties', function ($scope, sharedProperties) {
$scope.getLoc = function () {
        var nObj = sharedProperties.getCoords();
        console.log(nObj);
        var numbers = [nObj.lat, nObj.lng, nObj.acc];
        return "This is my location: " + numbers[0].toFixed(6) + ", " + numbers[1].toFixed(6) + ". I'm around " + numbers[2].toFixed(0) + " meters from point.";   
}])

在视图中，我这样写。

<textarea style="width: 100%; height: 183px;" placeholder="Message">{{getLoc()}}</textarea>

但是它在文本区显示{{getLoc()}}。我是否可以隐藏这个，只有当它获得数据时才显示?