Search code examples
javascripttwitter-bootstrapangularjsangularjs-scope

AngularJS: Radio buttons do not work with Bootstrap 3

I have a radio button, which sets the value of True or False based on the value of transaction type

The demo can be found here

The problem is when I click on any of the radio button, the value of $scope.transaction.debit does not change

My javascript code is

    var app = angular.module('myApp', []);

    app.controller("MainCtrl", function($scope){
      $scope.transaction = {};
      $scope.transaction.debit=undefined;

      console.log('controller initialized');
    });

Please let me know what I am doing wrong.

Also, I do not want to use Angular-UI or AngularStrap for this purpose, unless no other option is available.

Solution

  • You have a large label stuck over the top of the radio buttons which prevents input to your radio buttons. The html should read:

     <input type="radio" data-ng-model="transaction.debit" value="True">Debit</input>

 <input type="radio" data-ng-model="transaction.debit" value="False">Credit</input>

    It then works, of course it may not look the way you want it to then.