AngularJS谷歌地图不会在第一个视图上更新它的内容

这是一个单页的angular应用。我需要显示一个列表的地图基于城市或纬度和经度值来自远程。

我制作了一个指令并保存在一个ng-repeat中以显示地图。我的问题是地图在第一个视图上没有更新。如果我按下next按钮来显示下一组列表，则映射开始显示其内容。如果我按下inspect元素按钮，它就会开始显示内容。或者关闭inspect元素按钮。

my.html

<div ng-repeat="project in allProjects">
    <map-image  latitude-longitude="{{project.latlongstring}}" cityname="{{project.city.name}}" object-id="{{project.id}}">
        <div id="map_{{project.id}}" style="height: 100%;"></div>
    </map-image>
</div

我的指令链接函数包含显示映射的代码。My.map.js

link: function(scope, iElm, iAttrs, controller) { 
    var html ="";
    var tempalate = "";
    var map;
    var geocoder;
    scope.$watchGroup(['latitudeLongitude', 'city'], function() {
             if(scope.latitudeLongitude){
InitializeMap("latitudeLongitude",scope.latitudeLongitude.split(','));
             }else if(scope.city){
                codeAddress(scope.city)
             }
    });
   function InitializeMap(param, value) {
        var latlng = new google.maps.LatLng(value[0],value[1]);
        var myOptions =
                    {
                       zoom: 8,
                       center: latlng,
                       mapTypeId: google.maps.MapTypeId.ROADMAP,
                       disableDefaultUI: true
                    };
        map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions);
    }
    var geocoder = new google.maps.Geocoder();
    function codeAddress(address) {
      geocoder.geocode({ 'address': address }, function(results, status) {
            if (status === google.maps.GeocoderStatus.OK) {
                 InitializeMap(null, [results[0].geometry.location.G,results[0].geometry.location.K])
            }else {
                 console.log("Geocode unsuccessful");
            }
    });
 };

已尝试使用

if(!scope.$$phase){
    scope.$apply();
}

在map = new google.maps.Map(document.getElementById("map_"+scope.objectid), myOptions);