Google API for Map无法与Angular JS $ scope.data输入配合使用

Question

I have the following angular script. i am facing issue with the datatype of the data which i have received in success method of the http request. the data which has been received is used for the displaying current location on the google map using javascript available. The problem is, the location marker and the map is not getting displayed for longitude and the latitude received. However if i hard code and pass the static values(static inputs are commented), the map and the place marker is getting displayed. Kindly help me resolving this issue. Thanks a lot in advance.

var app = angular.module("myApp", []);

app.controller("myCtrl",function ($scope,$rootScope,$http) {    
      var city = 'Mumbai';
      $scope.uploadResultFinal= false;

      $http({
          method: 'POST', 
          url: '\HomeServlet2',
          headers: {
             'Content-Type': 'application/json'
          },   
          params: {
             City:city
          }
      });
      .success(function(data) {
          console.log(angular.toJson(data));                    
          $scope.data1= data.Addresses;
          $scope.latlang =[$scope.data1[2].Latitude,$scope.data1[2].Longitude];
          $scope.uploadResultFinal= true;
      })
      .error(function(data, status, header, config) {
          console.log('Error');
      });



      $scope.$watch('uploadResultFinal', function() {
          alert($scope.latlang[0]);
          alert($scope.latlang[1]);
          var l1 =$scope.latlang[0]; 
          var l2 =$scope.latlang[1]; 
          /* static values are commented.*/
          /*
          var l1= "19.72";
          var l2= "72.63";
          */
          var myCenter=new google.maps.LatLng(l1,l2);


          function initialize() {
              var mapProp = {
              center:myCenter,
              zoom:5,
              mapTypeId:google.maps.MapTypeId.ROADMAP
          };

          var map=new google.maps.Map(document.getElementById("googleMap"),mapProp);

          var marker=new google.maps.Marker({
            position:myCenter,
            animation:google.maps.Animation.BOUNCE
            });

          marker.setMap(map);

          var infowindow = new google.maps.InfoWindow({
            content:"You Are Here!"
          });

          infowindow.open(map,marker);
     }

        google.maps.event.addDomListener(window, 'load', initialize);


},true); 
   }
);

Answer 1

Just a guess, You could try adding $scope.$apply() in the success & error functions. Or better add a .finally() to the $http.

 .finally(function(){ $scope.$apply(); }) 

Hope it helps.