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

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


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!


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>


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