radio button can not be selected

[madhav5589]

I recently upgraded Angularjs v1.3.0-rc.4. I have a radio buttons on the page and the issue is once I choose a radio button, I can not change it anyway. It shows the one gets selected and then even we change the radio button selection, it doesn't change. But in the back end, it is working fine. It returns the value of last radio button we clicked although UI shows the first radio button we selected.

[btford]

Please:

1. Provide a reproduction via jsbin, plnkr.co or jsfiddle.
2. Check that the problem persists after updating Angular.

This saves us a lot of time. Thanks!

[madhav5589]

Sorry, I closed this issue. But it still persist. Here is the plunker: http://plnkr.co/edit/61tNvKPFvRkSRsuLD8pS?p=preview

[gkalpak]

I think this is a duplicate of #4516.
Some incompatibility between AngularJS and bootstrap's js (if you remove the bootstrap's js it works - not that this is a solution, but it indicates the problem).

Not sure what is causing it though.

[madhav5589]

Okay. So I am keeping this issue open until it is solved. Once solved, you can close the issue.
Thanks.

[jhaikone]

Hi guys.

I was able to fix this by giving radiobutton's inputs unique names (options1,options2,options3). Part of your example code was:

      <div class="btn-group row" data-toggle="buttons">
        <label>
          <input type="radio" data-ng-model="selection" name="options" value="option1" />
          <span>Option 1</span>
        </label>
        <label >
          <input type="radio" data-ng-model="selection" name="options" value="option2" />
          <span>Option 2</span>
        </label>
        <label >
          <input type="radio" data-ng-model="selection" name="options" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

The fixed code looked like this:

      <div class="btn-group row" data-toggle="buttons">
        <label>
          <input type="radio" data-ng-model="selection" name="options1" value="option1" />
          <span>Option 1</span>
        </label>
        <label >
          <input type="radio" data-ng-model="selection" name="options2" value="option2" />
          <span>Option 2</span>
        </label>
        <label >
          <input type="radio" data-ng-model="selection" name="options3" value="option3" />
          <span>Option 3</span>
        </label>
      </div>

[Narretz]

@jhaikone Interesting. Because radio buttons should not have unique names if they belong to one set. A shared name is how the browser groups input[radio]. If anything, there's something wrong with the bootstrap radio implementation.

[jhaikone]

@Narretz yeah I know. I was just playing around with the code and found out that radiobutton UI started to work immediately when the names were unique. This is not a solution but rather a just "interesting finding" I wanted to share if it might help someone to track the real issue.

[Narretz]

Yes this is a dupe of #4516.

However, note that bootstrap's button group toggle won't work at all if you don't give the labels the correct classes. (as it is in the plunker)