AngularJs和tabset

Question

我有一个包含3个标签的标签集：

<tabset>
    <tab heading="Tab1" active="activeTab1">
        ...
    </tab>
    <tab heading="Tab2" active="activeTab2" select="tabTab2()">
        ...
        <div id="newMap" class="col-sm-12" style="height: 400px;"></div>
        ...
    </tab>
    <tab heading="Tab3" active="activeTab3" select="tabTab3()">
        ...
    </tab>
</tabset>

在控制器上：

$scope.tabTab2 = function()
{
   console.log("tab2");
   var map = new google.maps.Map(document.getElementById("newMap"), mapOptions);
}

$scope.tabTab3 = function()
{
   console.log("tab3");
}

所以，我有2个与此代码相关的问题。

首先：如果activeTab2设置为true，则函数tabTab2将运行两次（与Tab3相同）。这是为什么？如果我然后选择tab1并返回tab2它将只运行一次...

第二：我正在尝试使用div newMap中的google.maps，但它会抛出错误Cannot read property 'offsetWidth' of null而null元素是document.getElementById("newMap")。再一次，为什么会这样？

如果我将activeTab2设置为false并将activeTab1设置为true，然后单击tab2，则可以正常工作。问题是只有当它活跃于开始......

---------编辑-------------

这是plunker

如果将activeTab1设置为TRUE，则它可以正常工作，如果设置为FALSE（并且activeTab2设置为TRUE），则它不起作用。

在回复marycy时，名称tabTab1 ...仅适用于Stackoverflow问题......

----- EDIT2 -------

plunker url已更新

----- EDIT3 -------

所以，只是意识到问题在于标签运行了select上的两倍功能。如果您将plunker更改为

$scope.tabTab2 = function()
{
  console.log("Tab2");
  console.log(document.getElementById("newMap"));
}

并且activeTab为TRUE，控制台将显示

Tab2
null
Tab2
<div id="newMap" class="col-sm-12" style="height: 400px;"></div>

所以，第一次运行该函数时，该元素不存在，但是在第二次它运行时...