Simple Angular radio buttons not working... seem broken?

Question

This works:

<h4>Radio &amp; Uncheckable Radio</h4>
<pre>{{radioModel || 'null'}}</pre>
<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>

This doesn't work

{{radioModel || 'null'}}
<div class="btn-group">
  <label class="btn btn-primary" data-ng-repeat="store in global.user.store" ng-model="radioModel" btn-radio="{{store}}" uncheckable>{{store}}</label><br>
</div>

If you select one radio button, the other radiobuttons don't de-select. Instead of having one radio button checked at a time, all 3 can be checked! And the {{radioModel}} won't display any value. For the first example, {{radioModel}} would display 'Left,' 'Right,' or 'Middle' depending on the value of btn-radio.

It's like data-ng-repeat="store in global.user.store" breaks the button behavior!

Answer 1

Try setting the scope variable with a dot, like if it an object.

$scope.radio = {model: null}; //for example

And use always radio.model instead of radioModel.

This is because the way the scope inheritance works each ng-model of the ng-repeat will generate a new scope. With the 'dot' rule you want have this problem.

Here is more information https://github.com/angular/angular.js/wiki/Understanding-Scopes