ui.bootstrap.buttons with ng-repeat

angularjs, twitter-bootstrap

Solution

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

Problem

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> ```

Original source