Setting and getting bootstrap radio button inside angular repeat loop

Question

I am trying to set the default button and get the current selected value. The example without the repeat loop works.

Here is my plnkr: http://plnkr.co/edit/t9CefA5bhLZs3RASmEUG?p=preview

It is based on this example: http://plnkr.co/edit/LFj4inY9TLYZs9z7yHCr?p=preview

Thank you!

Answer 1

So, there were 2 things going on in your plunker.

Firstly the btn-radio attribute doesn't need interpolation ({{}}) you can (and should) provide an expression directly. So just write btn-radio="company.id" instead of btn-radio="{{company.id}}".

Secondly, you must know that the ng-repeat directive creates a new scope. This is a very, very common conceptual issue people have with AngularJS so I would encourage you to read https://github.com/angular/angular.js/wiki/The-Nuances-of-Scope-Prototypal-Inheritance

Coming back to you particular problem you can either change you ng-model expression to point to a parent scope (ng-model="$parent.radioModel") or bind to an object property (ng-model="radioModel.id").

Here is a working plunk with the second approach: http://plnkr.co/edit/uGAxaRlPFK6sD4tRjGXX?p=preview