I have a model like this:
$scope.user = { is_active: true }
I'm currently displaying that in my template like this:
<form class="form-horizontal">
<!-- ... -->
<div class="form-group">
<label class="col-sm-2 control-label">Is Active</label>
<div class="btn-group col-sm-5" data-toggle="buttons">
<label class="btn btn-default">
<input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
Active
</label>
<label class="btn btn-default">
<input type="radio" ng-selected="{{ user.is_active }}" name="is_active">
Inactive
</label>
</div>
</form>
This looks like this in practice:
How can I bind the value of {{ user.is_active }} to this button group in Bootstrap? I'd like the correct button to be depressed based on what's selected in the model.
You may also want to look at the buttons in Angular's bootstrap ui- these are designed to work cleanly with Angular and so they use ngModel directly.
If you go this route you'll need to use ngModel by adding it to your buttons like this:
<input type="radio" ng-model="user.is_active" name="is_active">
Sticking with the default Twitter Bootstrap- it uses the class active to define which label is active. To set this you can use ngClass. For instance on the label you want active when is_active is true you'll want this:
ng-class="{active:user.is_active==true}
And to control the value you'll need to use 'ngClick' on the label to toggle the value.
<label class="btn btn-default" ng-class="{active:user.is_active==true}" ng-click="setActive(true)">
<input type="radio">
Active
</label>
<label class="btn btn-default" ng-class="{active:user.is_active==false}" ng-click="setActive(false)">
<input type="radio">
Inactive
</label>
And the new function:
$scope.setActive = function(val) {
$scope.user.is_active= val;
};