AngularJS: map via Google Maps API v3 in a tab

Question

I am trying to create a page with tabs (using AngularJS). There is a map (Google Maps API v3) in one of those tabs. When the map is in the tab in foreground everything seems to be OK. But when the map is loaded in the background tab and visible only after the tab is clicked the map is misplaced/cut off and when you try to manipulate with it it's functionality seems to be broken.

I've searched for solutions and I found those tricks with

google.maps.event.trigger(map, 'resize');
map.setCenter(center);

but it's not working. Could you please have a look at http://jsfiddle.net/n4q7Y/5/ and tell me what I missed?

Thank you.

Answer 1

Wait a moment before you trigger the resize-event: http://jsfiddle.net/doktormolle/aAeZw/

Answer 2

thank you Dr.Molle, if I can improve it a bit, in my case a $timeout without delay do the job perfectly (as it gonna wait until the end of the $digest cycle)

$timeout(function () {
    // in my case
    initializeMap();
    // OR this case:
    google.maps.event.trigger(map, 'resize');                      
}, 1000); // with or without delay