Radio buttons binding is not working when a data-toggle attribute is added in AngularJS + Bootstrap

Question

I am using AngularJS along with Twitter Bootstrap and I want to make two radio buttons look like normal Bootstrap buttons. I found this example on jsFiddle and after applying it to my case everything looks fine but it's not working correctly.

I want to bind the radio buttons to a model in Angular. Here's my code:

<div class="btn-group btn-group-lg btn-group-justified" data-toggle="buttons">
    <label class="btn btn-default">
        <input type="radio" name="isMad" ng-model="isMad" ng-value="false" /> No
    </label>
    <label class="btn btn-default">
        <input type="radio" name="isMad" ng-model="isMad" ng-value="true" /> Yes
    </label>
</div>

<h1>
    I am mad: {{ isMad }}
</h1>

And here's the result of clicking on the "No" (radio) button:

So, the model is not bound at all. When I remove the data-toggle attribute from the button group, everything works correctly but the radio buttons are visualized just on top of the Bootstrap buttons like in this picture:

What should I do in order to have Bootstrap buttons looking like these in the first picture and working correctly with AngularJS model binding like these in the second one?

Answer 1

i guess you are not the only one that is mad about this issue. Currently I am facing the same problem.

Let me show you my workaround:

 <div class="btn-group">
    <label class="btn btn-info" ng-class="{ active : model === 'value1' }">
      <input type="radio" ng-model="model" value="value1" class="hide"> value 1
    </label>
    <label class="btn btn-info" ng-class="{ active : model === 'value2' }">
      <input type="radio" ng-model="model" value="value2" class="hide"> value 2
    </label>
  </div>

The key-point to understand is to remove the data-toggle="buttons" which adds additional JavaScript logic that causes the error. And then hide the check-box with the class="hide" in the same input which then sets the active state "manually" according to the value of your backing model object.

Hope this helps!