javascript - Google Maps for AngularJS does not work with any Angular directives related to "HIDE" and "SHOW" -

the angularjs google maps library not work once ng-hide or ng-show used, once 1 of 2 display functions called, happens map:

enter image description here

this can fixed when resize browser window, there hack that'll similar window resizing fix graphical issue javascript?

without hack angularjs google maps library defeats purpose of single page applications.

in stackoverflow issue this, solution add ng-cloak directive map tag:

<map ng-cloak zoom="10" style="visibility:hidden; z-index:1000; width:900px; height:300px; display:inline-block;" width="1600" height="1600"/>

but i've tried , absolutely nothing. maybe $rootscope.map.width = z; ???

how replicate window resizing fix instantly using javascript? or guess better question how can library work despite fact it's broken.

this angular library not work unless issue patched , temporary hack used in place counter graphical bug.

try using data-ng-if instead of ng-hide or ng-show.

GHI