tengo un formulario que creo las filas dinamicamente mediante el botón "add", el cual me genera una fila con un input, textarea y tres botones, mi duda es como puedo dejar los botones presionados (activo) y los otros dos en color gris, me imagino que puede ser capturando algun evento que se gatille, pero en verdad estoy muy perdida, he buscado pero es mi primer proyecto en angular.
formulario.html
<ion-view view-title="Formulario Lista" class="bar-positive home">
<ion-content>
<div class="row header">
<div class="col"><span>{{codigo}}</span></div>
<div class="col" style="text-align: right;"><span>{{nombre}}</span></div>
</div>
<center>
<div>
<img src="https://logo.clearbit.com/codelco.com"/>
</div>
<br/>
<form ng-submit="addNew()">
<div id="dvContenedor">
<div style="text-align: left;padding-left: 21px;padding-bottom: 10px;"> <input type="submit" class="button button-balanced btn btn-primary pull-right addnew" value="+ Registro"></div>
<table id='tblFomrList' class="table table-striped table-bordered" style="width:95%;">
<thead>
<tr>
<th><input type="checkbox" ng-model="selectedAll" ng-click="checkAll()" /></th>
<th>ID</th>
<th>Observación</th>
<th>Status</th>
<th></th>
</tr>
</thead>
<tbody>
<tr ng-repeat="personalDetail in personalDetails">
<td style="width: 5%;">
<input type="checkbox" ng-model="personalDetail.selected"/></td>
<td style="width: 20%;">
<input type="text" class="form-control" ng-model="personalDetail.ID" /></td>
<td style="width: 50%;">
<!-- <input type="text" class="form-control" ng-model="personalDetail.OBS" /> -->
<textarea class="form-control" ng-model="personalDetail.OBS" style="width: 99%;display: inline" rows="4"></textarea></td>
<td style="width: 20%;">
<div ng-model="personalDetail.Status" style="display: flex;">
<input type="button" class="button button-balanced" value="V" ng-click="marcaBoton( $this);"/>
<input type="button" class="button button-energized" value="A" ng-click="marcaBoton( $this);"/>
<input type="button" class="button button-assertive" value="R" ng-click="marcaBoton( $this);"/>
</div></td>
<td ng-model="personalDetail.Camera" style="width: 5%;"><div><img src="img/cameraAdd.png"/></div></td>
</tr>
</tbody>
</table>
<div class="form-group" style="padding-top: 10px;">
<input ng-hide="!personalDetails.length" type="button" class="button button-assertive btn btn-danger pull-right" ng-click="remove()" value="Eliminar">
<button class="button button-positive">Ingresar</button>
</div>
<div style="padding-top: 10px;">
</div>
</form>
</div>
</center>
</ion-content>
formulario.js
angular.module("app.controllers")
.controller("FormlarioListaController",function($scope){
$scope.codigo = "TEST-0001"
$scope.nombre = "Nombre Componente"
$scope.personalDetails = [];
$scope.addNew = function(personalDetail){
$scope.personalDetails.push({
'ID': "",
'OBS': "",
'Status': "",
'Camera': ""
});
console.log("add new "+$scope.personalDetail);
};
$scope.marcaBoton = function($event){
//debugger;
console.log("marca boton " + $event);
};
$scope.remove = function(){
var newDataList=[];
$scope.selectedAll = false;
angular.forEach($scope.personalDetails, function(selected){
if(!selected.selected){
newDataList.push(selected);
}
});
$scope.personalDetails = newDataList;
};
$scope.checkAll = function () {
if (!$scope.selectedAll) {
$scope.selectedAll = true;
} else {
$scope.selectedAll = false;
}
angular.forEach($scope.personalDetails, function(personalDetail) {
personalDetail.selected = $scope.selectedAll;
});
};
});