AngularJS Bootstrap radio button group

Question

I am trying to set up a radio button group using the tutorial from here:

https://angular-ui.github.io/bootstrap/

So in my view I created this:

<div class="form-group">
    <div class="btn-group">
        <label class="btn btn-primary" ng-model="controller.selectedLines[0].forDelivery">For delivery</label>
        <label class="btn btn-primary" ng-model="!controller.selectedLines[0].forDelivery">For collection</label>
    </div>
</div>

My problem is I can't get the button to be selected. In their example, they had different booleans for each button, but mine has to share the boolean, so if the boolean value is true then the button "For delivery" should be active, if the value is false then the "For collection" should be active.

I tried doing it like this:

<div class="form-group">
    <div class="btn-group" data-toggle="buttons">
        <label class="btn btn-default" ng-class="active: controller.selectedLines[0].forDelivery === true">
            <input type="radio" name="optionsRadios" ng-model="controller.selectedLines[0].forDelivery" ng-value="true" ng-change="deliveryController.requestDeliveryDate(controller.order, controller.selectedLines)"> For delivery
        </label>
        <label class="btn btn-default" ng-class="active: controller.selectedLines[0].forDelivery === false">
            <input type="radio" name="optionsRadios" ng-model="controller.selectedLines[0].forDelivery" ng-value="false" ng-change="deliveryController.requestDeliveryDate(controller.order, controller.selectedLines)"> For collection
        </label>
    </div>
</div>

but that had the same issue. Does anyone know how I can get it to select the button based on my value?

Answer 1

Referring to the example given in https://angular-ui.github.io/bootstrap/

<div class="btn-group">
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Left'">Left</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Middle'">Middle</label>
    <label class="btn btn-primary" ng-model="radioModel" btn-radio="'Right'">Right</label>
</div>

When radioModel='Left' the left button is selected.

As for your scenario, some options are missing. Here is the working code

<div class="btn-group">
    <label class="btn btn-primary" ng-model="mode" btn-radio="'Delivery'">For delivery</label>
    <label class="btn btn-primary" ng-model="mode" btn-radio="'Collection'">For collection</label>
</div>

Demo