简单的AngularJS Tab Widget

Question

是否有更简洁/实用的方法来创建带有角度的标签小部件，不包括ui.bootstrap？标签模块很棒，但我正在尝试创建一个用手写笔构建的精益网站，我发现ui.bootstrap相当复杂，并且与Twitter bootstrap css交织在一起。我在构建指令方面没有太多经验，但这是最好的方法吗？在混合了我发现的一些例子之后，这就是我想出来的......

<div ng-app="app">
  <div class="container" ng-init="selectTab='tab1'" ng-switch>
    <ul class="tab-header">
      <li ng-class="{active: selectTab=='tab1'}" ng-click="selectTab='tab1'">tab1</li>
      <li ng-class="{active: selectTab=='tab2'}" ng-click="selectTab='tab2'">tab2</li>
      <li ng-class="{active: selectTab=='tab3'}" ng-click="selectTab='tab3'">tab3</li>
    </ul>
    <div ng-switch on="selectTab">
      <div class="tab-content" ng-switch-when="tab1">tab1 contents</div>
      <div class="tab-content" ng-switch-when="tab2">tab2 contents</div>  
      <div class="tab-content" ng-switch-when="tab3">tab3 contents</div>
    </div>
  </div>
</div>

Codepen Example