How can I have a ng-model in btn-group - angularjs

Question

How can I have a ng-model in a btn-group? It's working like radio buttons, and I need to control the answer every time I click in one specific button.
Here is my code:
<div class="btn-group">
<button type="button" class="btn btn-sm btn-primary"
ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 1"
ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 1 ? [''] : ['btn-info']">
Yes
</button>
<button type="button" class="btn btn-sm btn-primary"
ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 2"
ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 2 ? [''] : ['btn-info']">
No
</button>
<button type="button" class="btn btn-sm btn-primary"
ng-click="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes = 9"
ng-class="icc.model.investigacao.dadoClinicoDoencaPreExCollection.statusDiabetes == 9 ? [''] : ['btn-info']">
Ignored
</button>
</div>
In the end I need to validate these custom "radio buttons". How can I do that?

Answer 1

You can use Bootstrap to style your radio buttons as toggle buttons. This will allow you to keep the input type for use of ng-model and form validation, without using your ng-click method above.
Here is a simple demo in a fiddle.
Controller:
var app=angular.module('myApp', []);
app.controller('MyCtrl', function MyCtrl($scope) {
$scope.people = [{
name: "John"
}, {
name: "Paul"
}, {
name: "George"
}, {
name: "Ringo"
}];
$scope.choices = {};
});
HTML:
<form name="myForm" ng-app="myApp" ng-controller="MyCtrl">
<p>Favorite Beatle</p>
<div class="btn-group-vertical" data-toggle="buttons">
<label class="btn btn-primary" ng-repeat="person in people">
<input type="radio" name="options" id="option1" autocomplete="off" ng-model="choices.SelectedPerson" value="{{person.name}}" required> {{person.name}}
</label>
</div>
<p><tt>myForm.$invalid: {{myForm.$invalid}}</tt></p>
You chose: <strong>{{choices.SelectedPerson}}</strong>
<button ng-disabled="myForm.$invalid">Submit</button>

Answer 2

You have very similar buttons code. I advise you to generate them from the model. And you will no problem to link them to controller.
Here is code example:
in controller:
$scope.buttonChecked = 1;
$scope.buttons = [
{
text: 'Yes',
value: 1
}, {
text: 'NO',
value: 2
}, {
text: 'Ignored',
value: 9
}
];
And the view:
<div class="btn-group">
<button ng-repeat="button in buttons" type="button" class="btn btn-sm btn-primary"
ng-click="buttonChecked = button.value"
ng-class="buttonChecked == button.value ? [''] : ['btn-info']">
{{button.text}}
</button>
</div>
I am not sure how do you want represent the changes, but if you will explain that more detail I will edit an answer, hope it will help you!
Updated

Answer 3

I had a situation like that one and I solve it like so:
I used the li to position the buttons and are the "real" clickable element the <button>... are just for looks :D
<ul>
<li ng-repeat="item in buttons" ng-show=item.view ng-click="goToNgRepeat(item.op);" ng-style="{'display':'inline-block'}">
<button class="menuBtn" ng-style="{'width':item.size, 'height':menuButtonHeight}"><b>{{ item.tx }}</b></button>
</li>
</ul>
and solve the which one was pressed with ng-click calling a function and passing a value, the value is defined in the button array:
$scope.buttons = [
{ "tx": "Alm Extn", "op": 0, "view": true, "viewCont": false, "file": "TXT/extn.htm", "size": topicButtonsPos.menuButtonW },
{ "tx": "DS", "op": 1, "view": true, "viewCont": false, "file": "TXT/Ds.htm", "size": topicButtonsPos.menuButtonW },
{ "tx": "CDnt", "op": 2, "view": true, "viewCont": false, "file": "TXT/C.htm", "size": topicButtonsPos.menuButtonW },
{ "tx": "CDnt", "op": 3, "view": true, "viewCont": false, "file": "TXT/CA.htm", "size": topicButtonsPos.menuButtonW },
...
];
This array content op which I use as button value.
Hope it helps.