UI Bootstrap radio button in ng-repeat

Question

I am trying to do a set of radio buttons using ui bootstrap (http://angular-ui.github.io/bootstrap/) pretty much the same that the example on their website, but using ng-repeat:

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

but for some reason it doesn't work when I use ng-repeat. Anyone knows why?

I've made a plunker to illustrate the problem: http://plnkr.co/edit/0sDgKoRhHOgfnIvBPmi4?p=preview

Thanks!

Answer 1

You are doing a little mistake with your ng-model. When you are going to pass it in radiobutton with repeat in you model you can use it like

<div class="btn-group">
    <label ng-repeat='option in options' class="btn btn-danger" ng-model="$parent.radioModel2" btn-radio="'{{option}}'" uncheckable>{{option}}</label>
</div>

Try this.

Check the link on plnkr

http://plnkr.co/edit/m24ZcYuttw6IuCBh02rQ?p=preview

Answer 2

From the Understanding Scopes angular.js wiki:

For each item/iteration, ng-repeat creates a new scope, which prototypically inherits from the parent scope, but it also assigns the item's value to a new property on the new child scope.

If item is a primitive (boolean, string, int, etc.), essentially a copy of the value is assigned to the new child scope property. Changing the child scope property's value does not change the array the parent scope references.

With italic are my comments.

However, things work differently when you have an object provided, because in this case only a reference to the original object is assigned to the child scope and not a copy.

Thus, you can make your example work by substituting your ng-model="radioModel2" with ng-model="data.radioModel2" and in your controller don't forget to create the object with $scope.data = {};

Here is a working fork of your plunker.