How To Require btn-radio Angular Bootstrap Button?

Question

I'm using a set of bootstrap label buttons as radio buttons (as they state to do in the angular bootstrap documentation here - http://angular-ui.github.io/bootstrap/). They work great. Only question I have is, how to you apply validation to them? How to you require one to be selected? Same goes with checkboxes. Any thoughts on this? I'm sure I'm not the only one to do this. Below is a snippet of the html/angular.

<div class="btn-group">
   <label class="btn btn-primary" ng-model="model.accident.vehicle.occupant.isOwner" btn-radio="'YES'">Yes</label>
   <label class="btn btn-primary" ng-model="model.accident.vehicle.occupant.isOwner" btn-radio="'NO'">No</label>
</div>

Answer 1

I had similar issue. I prepared following work around for me to validate 'required' with uncheckable ui bootstrap radio buttons.

1. give different ng-model to radio buttons
2. keep one hidden field for actual ngmodel
3. onchange of radio button update ng-model bind to hidden input field and update the other radio button to null value
4. keep required validation on hidden field. Field is hidden but mg-message is visible

in controller:

$scope.interacted = function (field) { return $scope.submitted || (field ? field.$dirty : false); };

<form name="my_form"
  class="main-form container"
  ng-controller="FormCtrl"
  ng-cloak class="ng-cloak"
  ng-submit="submit()"
  novalidate>

<div class="control-group">
    <div class="col-md-6">
        <div class="btn-group">
            <label class="btn btn-default"
                   name="radioModel"
                   ng-model="data.radioModel1"
                   btn-radio="'No'"
                   uncheckable
                   ng-required="!data.radioModel"
                   ng-change="data.q1 = (data.radioModel1 || null);data.radioModel2=null">No</label>

            <label class="btn btn-default"
                   name="radioModel"
                   ng-model="data.radioModel2"
                   btn-radio="'Yes'"
                   uncheckable
                   ng-required="!data.radioModel"
                   ng-change="data.q1 = (data.radioModel2 || null);data.radioModel1=null">Yes</label>
        </div>
        <input class="form-control"
               type="text"
               name="q1"
               id="input_q1"
               ng-model="data.q1"
               ng-model-options="{ updateOn: 'blur' }"
               ng-keyup="cancel($event)"
               required
               placeholder="First"
               style="display:none" />
        <div class="error-messages" ng-if="interacted(my_form.q1)" ng-messages="my_form.q1.$error">
            <div ng-message="required">Please select answer</div>
            <div ng-messages-include="form-messages"></div>
        </div>
    </div>
    <div class="col-md-6">
        {{data.q1 | json}}
        {{my_form.radioModel.$error | json}}
    </div>
</div>
<input class="form-control" type="submit" />