AngularJs - Динамические вкладки - должны настроить себя

Question

HTML-код, как показано ниже

<div>
    <ul data-ng-repeat ="tab in tabs">
          <li data-ng-class="{active: tab.selected == 'true'}"  message-key="Tab">
          </li>      
     </ul>
</div>

Экран выглядит так:

В одной части экрана есть панель с вкладками - вкладки могут иметь размер от 1 до 10. Требуется, чтобы вкладки не помещались в пространстве, их размер следует динамически уменьшать, чтобы соответствовать им. Полосы прокрутки не допускаются. Мы используем Angularjs и bootstrap. Есть идеи?

Внесены изменения в соответствии с предложениями. Экран выглядит следующим образом (вкладки выходят за пределы экрана, размер шрифта не изменяется)

HTML-код

    <div  class="divtab" >
        <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">                                                                                
          <li data-ng-class="{active: tab.selected == 'true'}" message-key="Tab">  </li>      
         </ul>
</div>

Css классы

.divtab {
   width: 100%;
   display: -webkit-box;
   display: -webkit-flex;
   display: -ms-flexbox;
   display: flex;
   -webkit-box-align: center;
   -webkit-align-items: center;
   -ms-flex-align: center;
   -ms-grid-row-align: center;
   align-items: center;
   height: 36px;
   margin-bottom: 15px;
   padding: 0;
}
.divtab > ul {
   list-style: none;
   padding: 0;
   margin: 0;
   height: 44px;
}
.divtab > ul > .active {
   background: #0e847d;
   color: #fff;
   border-radius: 2px 2px 0 0;
}
.divtab > ul > li {
  padding: 0 20px;
  height: 100%;
  display: -webkit-inline-box;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-align: center;
  -webkit-align-items: center;
  -ms-flex-align: center;
  -ms-grid-row-align: center;
  align-items: center;
}

Answer 1

Вот пример

Дж

$scope.tabs = [
    {id: 1, name: 'tab1', selected: true},
    {id: 2, name: 'tab2', selected: false}    
   ];

Html

 <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">
  <li  data-ng-class="{'active': tab.selected}"><a data-toggle="tab">{{tab.name}}</a></li>
</ul>

Answer 2

 <ul class="nav nav-tabs" data-ng-repeat ="tab in tabs">
  <li  data-ng-class="{active: tab.selected == 'true'}" message-key="Tab"></li>
</ul>

Используйте приведенный выше фрагмент кода. Используйте начальную загрузку nav и nav-tabs calass