javascript - ng-show と ng-if がコンテンツを表示できない

Question

シンプルなタブを作成しようとしています。タブ 0 のコンテンツは期待どおりに表示および非表示になりますが、タブ 1 をクリックするとスコープが true に更新されるにもかかわらず、タブ 1 は常に空白になります。

主に、コントローラーはラッパー div で開始されます。

<div ng-controller="AdvancedSettingsController as settings">

コントローラーは次のとおりです。

function AdvancedSettingsController($scope) {

    //setting tab name, and initial booleans
    $scope.tab = [
        {
            title : "Domains",
            active : true
        },
        { 
            title: "Locale",
            active : false 
        }
    ];

}

そして ng-click リスナー:

AdvancedSettingsController.prototype.tabs = function (o) {
    //set both tab active booleans to false
    for (var i = 0; i <= $scope.tab.length - 1; i++) {
        $scope.tab[i].active = false;
    }

    //set active tab boolean to true
    $scope.tab[o].active = true;

}

そして今、ng-repeat でループされたタブ オブジェクト - settings.tabs($index) は上記の関数にインデックスを渡しています:

<li data-ng-repeat="tab in settings.tab">
   <a data-ng-click="settings.tabs($index)">
      {{tab.title}}
   </a>
</li>

コンテンツは 2 つの div で保持され、次の場合があります。

<div data-ng-if="settings.tab[0].active">
   Content 1, true by default. Hides and shows as nav is toggled.
</div>

<div data-ng-if="settings.tab[1].active">
   Content 2, false by default. Never shows as nav is toggled.
</div>

最後に、Chrome は if: ngIf: settings.tab[1].active を更新しません。