javascript - Bind Bootstrap Radio Button To Angular Property - Stack Overflow

I am having troubles getting a bootstrap radio box selection to bind into an angular property.

Here is what I have, it is not working.

HTML BOOTSTRAP

 <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-success active">
            <input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autoplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
          </label>
          <label" class="btn btn-success ">
            <input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autoplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>  
          </label>
        </div>

ANGULAR JAVASCRIPT

var CurrencyInventoryBillController = function($scope, $http)
{
    $scope.newItemType = "NOT SELECTED";

    //TRIGGERED ON BUTTON CLICK. ALERT SHOWS 'NOT SELECTED' REGARDLESS OF WHICH RADIO BTN IS SELECTED
    $scope.insertNewCurrencyItem = function()
    {
        alert($scope.newItemType);
    }

}

Why is the VALUE and NG-MODEL directives not changing the SCOPE variable in this case?

I am having troubles getting a bootstrap radio box selection to bind into an angular property.

Here is what I have, it is not working.

HTML BOOTSTRAP

 <div class="btn-group" data-toggle="buttons">
          <label class="btn btn-success active">
            <input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autoplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
          </label>
          <label" class="btn btn-success ">
            <input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autoplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>  
          </label>
        </div>

ANGULAR JAVASCRIPT

var CurrencyInventoryBillController = function($scope, $http)
{
    $scope.newItemType = "NOT SELECTED";

    //TRIGGERED ON BUTTON CLICK. ALERT SHOWS 'NOT SELECTED' REGARDLESS OF WHICH RADIO BTN IS SELECTED
    $scope.insertNewCurrencyItem = function()
    {
        alert($scope.newItemType);
    }

}

Why is the VALUE and NG-MODEL directives not changing the SCOPE variable in this case?

• javascript
• html
• angularjs
• twitter-bootstrap

Share Improve this question Follow edited Dec 13, 2014 at 22:42 lukasgeiter 153k2929 gold badges349349 silver badges280280 bronze badges asked Nov 5, 2014 at 3:57 aylaayla 3,5441212 gold badges5050 silver badges7575 bronze badges

Add a ment  | 

3 Answers 3

Sorted by: Reset to default 3

I aborted trying to get the bindings to work, and went with another approach, changing the values in the angular scope via the ng-click method inline in the html

    <div class="btn-group" data-toggle="buttons">
       <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" ng-click="newItemType='bill'" > 
         <input type="radio"> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
      </label> 
      <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" ng-click="newItemType='coin'" >
        <input type="radio"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
      </label>
    </div>

Notice the ng-click event sets the newItemType to coin or bill. This approach is imperfect, but it works for now until someone can figure out how to bind radio buttons.

Can you try this

$scope.newItemType = 'bill';

<div class="btn-group" data-toggle="buttons">
   <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}" > 
     <input type="radio" value="bill" ng-model="newItemType"> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
  </label> 
  <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}" >
    <input type="radio" value="coin" ng-model="newItemType"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>
  </label>
</div>

Update: Here is the link to a fiddle

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



app.controller('MainCtrl', function($scope) {


});

<script src="https://ajax.googleapis./ajax/libs/angularjs/1.2.23/angular.min.js"></script>
  <link rel="stylesheet" href="//netdna.bootstrapcdn./bootstrap/3.3.0/css/bootstrap.min.css" />


<div ng-app="myApp">

  <div ng-controller="MainCtrl">

    <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}">
        <input type="radio" value="bill" ng-model="newItemType" name="options">Insert New Bill <span class="glyphicon glyphicon-file"></span> 
      </label>
      <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}">
        <input type="radio" value="coin" ng-model="newItemType" name="options">Insert New Coin <span class="glyphicon glyphicon-adjust"></span> 
      </label>
    </div>

    <br/>
    
    {{newItemType}}

  </div>

</div>

You have it you just have to change your class active to actually see it.

   <div class="btn-group" data-toggle="buttons">
      <label class="btn btn-success" ng-class="{'active':newItemType=='bill'}">
        <input type="radio" value="bill" ng-model="newItemType" name="options" id="option1" autoplete="off" checked> Insert New Bill <span class="glyphicon glyphicon-file"></span> 
      </label>
      <label class="btn btn-success" ng-class="{'active':newItemType=='coin'}">
        <input type="radio" value="coin" ng-model="newItemType" name="options" id="option2" autoplete="off"> Insert New Coin <span class="glyphicon glyphicon-adjust"></span>  
      </label>
    </div>

 <br/>
 {{newItemType}}