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?

Froze

Have you tried setting unique ids for each input element? – Octarchy

@Octarchy - yup, still not working – Froze

Angular and Bootstrap don't always play well together...angular-ui.github.io/bootstrap/#/buttons provides a directive for implementing radio buttons with bootstrap and angular – Octarchy

Also this #19151488 – Octarchy

Possible duplicate of ng-change,ng-click dont work with data-toggle="buttons" since v1.3.0 – Octarchy

This answer should help you https://mcmap.net/q/643276/-ng-change-ng-click-don-39-t-work-with-data-toggle-quot-buttons-quot-since-v1-3-0 – Octarchy

@Octarchy - you've posted a lot of things, haha. I decided to go for the angular-ui way because I believe it is more straightforward and I'm already using it in my project. Everything works correctly now, so if you give a good example of its usage and post it as an answer, I will choose it as an accepted one so that it could help other people too. :) Thanks for the help, man – Froze

Yes haha quite a few links...I've used angular ui bootstrap successfully for radio buttons so I'll post that as an answer – Octarchy

Hmm actually i didn't use ui-bootstrap for radio buttons where I thought I did but have it working successfully – Octarchy

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.

Kostman

just found this issue still exists in Angular 6 - removing data-toggle fixes it – Foreworn

As @Foreworn said, this issue was still present in Angular 6 which I resolved by removing data-toggle="buttons" and adding [class.active]="option == 'value'" to the labels. However I did not need to add class="hide" to any of the <input>s – Hubsher

Answer 2

Here's how I've done it on a previous project with a custom directive for handling scope. Using a custom directive with an isolate scope in this way is optional. It should still work for you using ng-controller - the difference is setting up the radio buttons in the controller not the html then rendering using ng-repeat. (working Plnkr)

radius.html

<div class="row">
  <div class="col-sm-12 col-md-12">
    <legend class="required">Choose a radius</legend>
  </div>
  <div class="col-sm-2 col-md-2">
    <fieldset>

        <div class="form-group" ng-repeat="radius in vm.radiusValues">
          <div class="check-radio">
            <label for="{{ radius.id }}"> 
              <input type='radio' name="radio" id="{{ radius.id }}" value="{{ radius.value }}"  ng-model="vm.radius">{{ radius.name }} 
            </label>
          </div>  
        </div>

    </fieldset> 

    <p>Selected value is {{ vm.radius }}</p>

  </div>
</div>

radius.directive.js

(function() {
    'use strict';

    angular
    .module('radius', [])
    .directive('radius', radius)
    .controller('RadiusCtrl', RadiusCtrl);

    function radius() {
        var directive = {
            bindToController: true,
            controller: 'RadiusCtrl',
            controllerAs: 'vm',
            replace: true,
            restrict: 'E',
            scope: {},
            templateUrl: 'radius.html'
        };

        return directive;
    }

    function RadiusCtrl() {
        var vm = this;

        vm.radius = 500;

        vm.radiusValues = [
            {name: '100m', value: 100, id: 'groupidrad1'},
            {name: '500m', value: 500, id: 'groupidrad2'},
            {name: '1000m', value: 1000, id: 'groupidrad3'},
            {name: '2000m', value: 2000, id: 'groupidrad4'}
        ];
    }
})();

The body of index.html

<body>
    <radius></radius>
</body>

Octarchy

Answer 3

Coding wise its correct. seems like you have not use proper Angulerjs version. which version u r using ? try with 1.3

Penta

i tried with 1.3.8 , same code works perfectly for me. – Penta