angularjs - キーナビゲーションが非表示の(ng-hideで)タブに集中するのを防ぐ方法は?

Question

kendouiタブストリップウィジェットの角度バージョンを使用しています

私のユースケースでは、タブストリップのタブの一部は最初は非表示であり、ユーザーがドロップダウンから特定のオプションを選択した場合にのみ表示されます:

    <div class="wrap">
  <div id="tabstrip" kendo-tab-strip="tabstrip">
    <ul>
      <li class="k-state-active">Tab 1</li>
      <li ng-show="tabToHide!=='hide-second' && tabToHide!=='hide-second-and-third'">Tab 2</li>
      <li ng-show="tabToHide!=='hide-third' && tabToHide!=='hide-second-and-third'">Tab 3</li>
      <li>Tab 4</li>
    </ul>

    <div>
      Tab one content.
    </div>
    <div ng-show="tabToHide!=='hide-second && tabToHide!=='hide-second-and-third''">
      Tab two content. 
    </div>
    <div ng-show="tabToHide!=='hide-third' && tabToHide!=='hide-second-and-third'">
      Tab three content. 
    </div> 
    <div>
      Tab 444 content. 
    </div>    
  </div>

  <select ng-model="tabToHide">
     <option>show-all</option>
     <option>hide-second</option>
     <option>hide-third</option>
     <option>hide-second-and-third</option>
  </select>
</div>

私の問題は、タブを矢印キーでナビゲートすると、「見えない」タブがフォーカスされることです。(タブ 1 がアクティブで、タブ 2 が非表示の場合、右に移動しようとすると、タブ 3 を開くには 2 回クリックする必要があります)

表示されているタブのみをフォーカス可能にする方法は?

ありがとう

ここに、問題をデモするplnkrがあります