How to refresh an angular ui-map (google-map)

Question

I'm hiding the map initially with an ng-hide. When the ng-hide-expression evaluates to true, the map is not shown correctly. It is only partially shown and behaviour is also strange on dragging. When I remove the ng-show attribute the map is shown correctly.

HTML:

<div ng-controller="MapCtrl">
   <button ng-click="showMap()">Show map</button>
   <div ng-show="showMapVar">
      <div ng-repeat="marker in myMarkers" ui-map-marker="myMarkers[$index]"
       ui-event="{}">
      </div>
      <div id="map_canvas" ui-map="myMap" style="height:200px;width:300px" 
       ui-event="{}" ui-options="mapOptions">
      </div>
   </div>
</div>

Javascript:

angular.module('doc.ui-map', ['ui.map'])
        .controller('MapCtrl', ['$scope', function ($scope) {

$scope.myMarkers = [];

$scope.mapOptions = {
        center: new google.maps.LatLng(35.784, -78.670),
        zoom: 15,
        mapTypeId: google.maps.MapTypeId.ROADMAP
}
$scope.showMap = function(){
        $scope.showMapVar = true;
}

}]) ;

Answer 1

Using ng-show merely sets the display property to none when the object is not supposed to be visible. This is messing with the height/width calculations.

On the other hand, ng-if (Angular 1.2) removes and re-creates the DOM, forcing a recomputation of the height/width. That should fix the problem.