AngularJS UI Bootstrap "btn-radio" directive doesn't work -

live demo

could explain why first 2 button groups work, third 1 doesn't?

<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">     2   </button>   <button class="btn btn-two"            ng-model="radiomodel.id"           btn-radio="3">     3   </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 }; 

this example uses angularui bootstrap 0.5.0. if change 0.3.0, works expected.

use ng-class. string interpolation in class funky.

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