Карта Google AngularJS не обновляет свой контент при первом просмотре

Его одностраничное угловое приложение. Мне нужно показать список карт, основанных на городе, или значение широты и долготы, исходящее от удаленного.

Я сделал директиву и сохранил внутри ng-repeat, чтобы отобразить карту. Моя проблема заключается в том, что карта не обновляется на первом представлении. Если я нажму следующую кнопку, чтобы отобразить следующий список, карта начнет отображать ее содержимое. Даже если он начнет показывать содержимое, нажмите кнопку проверки. Или закройте кнопку контрольного элемента.

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);

Но он все еще не работает.