Странное поведение при использовании угловых вкладок пользовательского интерфейса

Question

In this plunk пользователь должен иметь возможность нажать на одну из трех ссылок. Каждая ссылка имеет связанный с ней номер div, который отображается, когда пользователь нажимает на ссылку. Кроме того, при щелчке ссылки его цвет становится красным.

Проблема в том, что одна из ссылок (с надписью Show 10) не работает, div не отображается и текст не покраснел.

Обратите внимание, что поля в панели располагаются на вкладке «Угловой интерфейс». Если вкладка удалена (see here), проблема исчезнет. Как это исправить?

HTML (версия с закладками)

<div ng-controller="ctl"> 

     <uib-tabset style="height:500px"> 
      <uib-tab> 
      <a href="javascript:void(0)" 
        ng-style="{'color': showItem == 0 ? 'red' : 'blue' }" 
        ng-click="showItem=0" >Show 0</a> 
        <br> 
      <a href="javascript:void(0)" 
        ng-style="{'color': showItem == 10 ? 'red' : 'blue' }" 
        ng-click="displaySeries()">Show 10</a> 
        <br> 
      <a href="javascript:void(0)" 
        ng-style="{'color': showItem == 20 ? 'red' : 'blue' }" 
        ng-click="showItem=20" >Show 20</a> 
      <div ng-show="showItem==0"> 
        zero 
      </div> 
      <div ng-show="showItem==10"> 
        ten 
      </div> 
      <div ng-show="showItem==20"> 
        twenty 
      </div> 
      </uib-tab> 
     </uib-tabset> 
</div> 

Javascript (версия с закладками)

var app = angular.module('ui.bootstrap.demo', ['ui.bootstrap']); 

app.controller('ctl', function ($scope) { 
     $scope.showItem = 10; 

     $scope.displaySeries = function(){ 
      $scope.showItem = 10; 
     };  

}); 

Answer 1

в этом a тег, вы пропустили вход ng-click="showItem=10" (в настоящее время у вас есть ng-click="displaySeries()")