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