AngularJS UI Bootstrap «БТН-радио» директива не работает

Question

Live Demo

Может кто-нибудь объяснить, почему первые две кнопки группы работают, но третий один не делает?

<div class="btn-group"> 
    <button ng-repeat="company in companies" 
      class="btn" 
      ng-model="radioModel.id" 
      btn-radio="company.id"> 
    {{company.name}} 
    </button> 
</div> 

<div class="btn-group"> 
    <button class="btn btn-two" 
      ng-model="radioModel.id" 
      btn-radio="2"> 
    two 
    </button> 
    <button class="btn btn-two" 
      ng-model="radioModel.id" 
      btn-radio="3"> 
    three 
    </button> 
</div> 

<div class="btn-group"> 
    <button ng-repeat="company in companies" 
      class="btn btn-{{ company.name }}" 
      ng-model="radioModel.id" 
      btn-radio="company.id"> 
    {{company.name}} 
    </button> 
</div> 

$scope.companies = [ { id: 2, name: "two"}, {id: 3, name: "three"} ]; 
$scope.radioModel = { id: 3 }; 

В этом примере используется AngularUI Bootstrap 0.5.0. Если я изменю его на 0.3.0, все будет работать так, как ожидалось.

Answer 1

Использование ng-class. Интерполяция строк в class фанки.

ng-class="'btn btn-' + company.name"