ui.bootstrap.buttons with ng-repeat

Question

There seems to be a problem converting ui.bootstrap.buttons to be used with ng-repeat. The ui.bootstrap.buttons example and documentation is here: http://angular-ui.github.io/bootstrap/

Bascially the default example works nicely: http://plnkr.co/edit/2O81y57GtfP6EPNH9qYa?p=preview

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

But when it's converted the use ng-repeat, it breaks: http://plnkr.co/edit/nzx1VTGN4Q59JlFCU53V?p=preview

<div class="btn-group">
    <label ng-repeat="test in ['Left', 'Middle', 'Right']" class="btn btn-primary" ng-model="radioModel" btn-radio="'{{test}}'">{{test}}</label>
</div>

Answer 1

Try

<label ng-repeat="test in ['Left', 'Middle', 'Right']" btn-radio="test" class="btn btn-primary" ng-model="radio.model">

instead of

btn-radio="'{{test}}'"

On top of this ng-repeat is creating a new scope so you need to account for this as well. Here is a working plunk: http://plnkr.co/edit/h5e5OgFCqv28MPy4tEaM?p=preview