Angular: Map in tab

http://angularjs.org/

HTML

<script src="http://code.angularjs.org/angular-1.0.0rc12.js"></script>
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

<div ng-app="myApp" ng-controller="MyMapCtrl">
  <div class="tabs">
    <div ng-click="selected = 'first'" ng-class="{'selected': selected == 'first'}" class="tab">first</div>
  	<div ng-click="selected = 'second'" ng-class="{'selected': selected == 'second'}" class="tab">second</div>
   </div>
   
    <div ng-show="selected == 'first'" class="tab_content">
        <p>some content here...</p>
    </div>
    <div ng-show="selected == 'second'" class="tab_content">
    	<map id="map_canvas"></map>
    </div>
</div>

CSS

body {
  padding: 10px;   
}

#map_canvas {
    margin: 0;
    padding: 0;
    height: 400px;
    border: 1px solid #ccc;
}

.tabs {
    height: 35px;
    margin: 0;
    width: 100%;
}

.tab {
    background-color: #E4E4E4;
    cursor: pointer;
    float: left;
    font-size: 12px;
    margin-right: 10px;
    padding: 10px 0 10px;
    text-align: center;
    width: 85px;
    line-height: 15px;
}

.selected {
    background-color: silver;
}

.tab_content {
    background-color: silver;
    height: 400px;
}

p {
    padding: 10px;
}

JavaScript

angular.module('myApp', ['directives']);

function MyMapCtrl ($scope) {
	$scope.selected = 'first'; // try to put 'second' here
}

angular.module('directives', []).directive('map', function() {
    return {
        restrict: 'E',
        replace: true,
        template: '<div></div>',
        link: function($scope, element, attrs) {
            var center = new google.maps.LatLng(50.1, 14.4);
            
            var map_options = {
                zoom: 14,
                center: center,
                mapTypeId: google.maps.MapTypeId.SATELLITE
            };
          
            // create map
            var map = new google.maps.Map(document.getElementById(attrs.id), map_options);
            
            // configure marker
            var marker_options = {
                map: map,
                position: center
            };
            
            // create marker
            var marker = new google.maps.Marker(marker_options);
            
            $scope.$watch('selected', function () {
                
                                                  window.setTimeout(function(){
                                                      
                    google.maps.event.trigger(map, 'resize');
                                                     },100);
                
          });
        }
    }
});