Use ngMap with tabset - only the first tab will be initiated

Question

Only first tab is set.

<tabset>
    <tab heading="One"><map center="London"></map></tab>
    <tab heading="Two"><map center="Liverpool"></map></tab>
    <tab heading="Three">Three</tab>
</tabset>

http://plnkr.co/edit/DZj5RkDUHk9C8oTvsjcf?p=preview

some advice?

------ EDIT ------

if use angular 1.3.15 and ui-bootstrap tpls-0.13.3 it works only pushing button

<button class="btn btn-primary" ng-click="reRednerMap()">reRender</button>

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

Some advice?

Answer 1

This solutions works fine.

<tabset>
     <tab heading="One" select="reRenderMap()"><map center="London"></map></tab>
     <tab heading="Two" select="reRenderMap()"><map id="liverpool" center="Liverpool"></map></tab>
     <tab heading="Three">Three</tab>
 </tabset>

in controller

 $scope.reRenderMap = function() {
            $timeout(function(){
                angular.forEach($scope.maps, function(index) {
                    google.maps.event.trigger(index, 'resize');
                });
            }, 500);
        }

        $scope.maps = [];

        $scope.$on('mapInitialized', function(evt, evtMap) {
              $scope.maps.push(evtMap);
        });

http://plnkr.co/edit/3P4iLTrog1ismFDUQNQe?p=preview

Answer 2

Actually map is initiated, but it is not correctly rendered (map rendering depends on parent container which, in its turn is hidden). So you should rerender it by triggering map resize on tab opening.

Bind reRenderFunction on selection event.

 <tabset>
     <tab heading="One"><map center="London"></map></tab>
     <tab heading="Two" select="reRednerMap()"><map id="liverpool" center="Liverpool"></map></tab>
     <tab heading="Three">Three</tab>
 </tabset>

Modify the controller:

 angular.module('ui.bootstrap.demo', ['ui.bootstrap','ngMap']);
 angular.module('ui.bootstrap.demo').controller('test', function ($scope) {
    $scope.reRednerMap = function() {            
        google.maps.event.trigger(this.map, 'resize');    
    }
 });

http://plnkr.co/edit/s3yPC1ZQE5c8jZoqCmbf?p=preview