Google Maps not reloading properly, angularjs

Hello my issue is with angularjs and google maps. I can load a map with no errors, with the marker in the map, when the html code is first loaded initially. Its when I click a button to display the map with the passed address. I know it creates the correct coordinates, its when the map is modally presented something goes worng.

Here is the github link for the issue I am having https://github.com/angular-ui/angular-google-maps/issues/1
I posted there as well.

I am using the github angularjs with google maps : https://angular-ui.github.io/angular-google-maps/#!/

Here is my javascript code for the map

      $scope.map =
     {
         center:
         {
              latitude: 6, longitude: 6
         },
          zoom: 8
     };
     $scope.lostPetCoordinates =
     {
         point:
         {
             latitude: 6,
             longitude:6
         }
     };
      $scope.viewOnMap = function(lastKnowLocation, index)
     {
         $scope.viewPost = $scope.postLostAnimals[index];
         var geocoder;
         $scope.showMap = true;

    geocoder = new google.maps.Geocoder();

    var connectMap = angular.element(document.getElementById('lostPetMap'));

    console.log(connectMap);

    geocoder.geocode({ 'address': lastKnowLocation },
        function (results, status)
        {
            if (status == google.maps.GeocoderStatus.OK)
            {


                $scope.map.center.latitude = results[0].geometry.location.B;
                $scope.map.center.longitude = results[0].geometry.location.k;

                $scope.lostPetCoordinates.point.latitude = results[0].geometry.location.B;
                $scope.lostPetCoordinates.point.longitude = results[0].geometry.location.k;

               }
           }
       );
   };

Here is my html code all for my google map which is in another directive being presented modally

      <div ng-if="showMap">

                     <ui-gmap-google-map id="lostPetMap" center="map.center" zoom="map.zoom" refresh='true'>

                         <ui-gmap-marker  coords='lostPetCoordinates.point' idkey="true">

                         </ui-gmap-marker>

                    </ui-gmap-google-map>
                </div>

            </div>

A weird side note is in the java script code if i put GoogleMaps.map in the if statement then it throws an error, and I am able to display the top corner of the map.

I have been at this for a while, I appreciate the help thank you in advance.