ng-bind issue with google maps

Question

I have searched almost all the blogs and tutorials regarding the Google Maps API with AngularJS, but I could not get the solution.

Basically,I am trying to create an map in which,

1. Marker will be set from the GPS.
2. When user will move marker, marker co-ordinates values in HTML will change.

here is HTML snippet

<div class="row">
    <div id="map" style="height: 400px; width: 400px">
    </div>
</div>
<div class="row" ng-show="showResult()">
    <span ng-bind="latlng.lat"></span><br /> <!--Here I want to see the change -->
    <span ng-bind="latlng.lng"></span><br /> <!--Here I want to see the change -->
    <span id="current"></span> <!-- Just for testing purpose-->
</div>

Here is AngularJS snippet

$scope.latlng = {lat: -1 ,lng: -1};
google.maps.event.addListener($scope.marker, 'dragend', function (evt) {
        document.getElementById('current').innerHTML = '<p>Lat: ' + evt.latLng.lat().toFixed(3) + 'Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';

        $scope.latlng.lat = evt.latLng.lat();
        $scope.latlng.lng = evt.latLng.lng();

        console.log($scope.latlng.lat+"\n"+$scope.latlng.lng);
//console.log is just to check if my variables are getting changed or not
        $scope.map.setCenter($scope.marker.position);
        $scope.marker.setMap($scope.map);
});

I hope I have made my self clear.

Now, my question is:

When I move the marker, I can easily see the changed value inside my current id, but I can't see the changed value in ng-bind part.

Any kind of help is welcome.

edit-I have tried ng-model, too.

Answer 1

It occurs since dragend event is triggered outside Angular event loop , you need to wrap the change with $apply function:

$scope.$apply(function() { 
    $scope.latlng.lat = evt.latLng.lat();
    $scope.latlng.lng = evt.latLng.lng(); 
});

Working example

angular.module('mapApp', [])
    .controller('mapController', function ($scope) {

        $scope.latlng = {lat: -1 ,lng: -1};

        $scope.map = new google.maps.Map(document.getElementById('map'), {
           zoom: 4,
           center: new google.maps.LatLng(59.339025, 18.065818)
        });

     

        $scope.marker = new google.maps.Marker({
                position: new google.maps.LatLng(59.339025, 18.065818),
                map: $scope.map,
                draggable:true
        });

        $scope.showResult = function(){
            return true;
        }

        google.maps.event.addListener($scope.marker, 'dragend', function (evt) {
             document.getElementById('current').innerHTML = '<p>Lat: ' + evt.latLng.lat().toFixed(3) + 'Lng: ' + evt.latLng.lng().toFixed(3) + '</p>';

            $scope.$apply(function() { 
                 $scope.latlng.lat = evt.latLng.lat();
                 $scope.latlng.lng = evt.latLng.lng(); 
             });
             //console.log($scope.latlng.lat+"\n"+$scope.latlng.lng);

             $scope.map.setCenter($scope.marker.position);
             $scope.marker.setMap($scope.map);
        });
       
        
    });

<script src="https://maps.google.com/maps/api/js"></script>
<script src="https://code.angularjs.org/1.3.15/angular.js"></script>

<div ng-app="mapApp" ng-controller="mapController">
     

    <div class="row">
         <div id="map" style="height: 400px; width: 400px"></div>
    </div>

    <div class="row" ng-show="showResult()">
       <span ng-bind="latlng.lat"></span><br /> <!--Here I want to see the change -->
       <span ng-bind="latlng.lng"></span><br /> <!--Here I want to see the change -->
       <span id="current"></span> <!-- Just for testing purpose-->
    </div>
   
</div>