Bootstrap data-toggle breaks ng-show and vice versa

Question

I have a form switcher using two radio buttons:

                <form>
                    <div class="btn-group">
                        <div class="radio">
                            <label class="btn btn-info">
                                <input type="radio" name="formSwitcher" id="gNr" ng-model="vm.formSwitcher" value="gNr" /> Form for new G
                            </label>
                        </div>

                        <div class="radio">
                            <label class="btn btn-info">
                                <input type="radio" name="formSwitcher" id="pNr" ng-model="vm.formSwitcher" value="pNr" /> Form for new P
                            </label>
                        </div>
                    </div>
                </form>

<div ng-show="vm.formSwitcher == 'gNr' ">
   <form> ... </form>
</div>

<div ng-show="vm.formSwitcher == 'pNr' ">
   <form> ... </form>
</div>

This is working as expected, I choose a radio button and the appropriate forms show/hide accordingly.

When I add data-toggle="buttons" to the 2nd line above, <div class="btn-group">, the ng-hide stops working BUT the change in visual state (appearing pressed or unpressed) works fine.

<div class="btn-group" data-toggle="buttons">

When I remove the data-toggle I don't get the variation in button color to show which of the radios is selected (the radio black dot still appears correctly).

Why would data-toggle="buttons" stop ng-show from working? The customer wants to see the button/radio change color on select.

Answer 1

You have extra <div class="radio">.

Remove them and it should work like in this fiddle.

Answer 2

The problem for me was jQuery.

1. When including bootstrap.min.js it wanted to include jQuery. You can remove bootstrap.min.js & jQuery in which just put an ng-class on the label to set the active state.

Reference Mart's fiddle from above for ng-class examples.

2. If removing jQuery is not an option for you: The other option is in the comments above saying just to remove the data-toggle. From there you can throw a style="display:none" directly on your radio inputs or create a class in your style sheet.