AngularJS: How to change radio button view when model changes?

Question

Consider the HTML as

<div class="btn-group col-lg-3" data-toggle="buttons" data-ng-model="transaction.debit" required>
    <label class="btn btn-default" data-ng-click="setDebitTransaction('true')">
      <input type="radio">Debit
    </label>
    <label class="btn btn-default" data-ng-click="setDebitTransaction('false')">
      <input type="radio">Credit
    </label>

<div>

and my Controller looks like

$scope.transaction = {};
  $scope.setDebitTransaction = function(value) {
    $scope.transaction.debit = value;
    console.log('Debit = ', $scope.transaction.debit);
  };

What I want?
- When I click on radio button I see that the $scope.transaction.debit is correctly set and that the corresponding radio button is enabled
- But when my model changes its value from backend processing, I see that $scope.transaction.debit is correctly set but corresponding radio element is not enabled

Question - How can I enable the radio button based on value in $scope.transaction.debit ?

DEMO

I have put this on plunker

Answer 1

Set the active class via ng-class on your labels like so:

<label class="btn btn-default" ng-class="{active: transaction.debit}" data-ng-click="setDebitTransaction('true')">
      <input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{active: !transaction.debit}" data-ng-click="setDebitTransaction('false')">
      <input type="radio">Credit
</label>

Plunker here: http://plnkr.co/edit/tUzF4J9ixEnKxLNdI1Bm

Answer 2

I assume what you are trying to do is get the appropriate button in the btn-group to change its state to "active" (bootstrap style class). To do this, there are probably a million ways, here is one:

Use the ng-class directive in angular, to inject a class to the btn div, based on some $scope attribute (in your case $scope.transaction.debit ).

Here is how that might look in code:

<label class="btn btn-default" ng-class="{'active': transaction.debit}" data-ng-click="setDebitTransaction('true')">
  <input type="radio">Debit
</label>
<label class="btn btn-default" ng-class="{'active': !transaction.debit}" data-ng-click="setDebitTransaction('false')">
  <input type="radio">Credit
</label>

Updated plunker .