I'm facing an issue where my ng-model is not getting updated when I cycle through radio button images using arrows instead of clicking on the image. How can I resolve this?
HTML
<div ng-repeat="contact in contacts"
ng-show="showContactID == {{contact.contact_id}}">
<div class="radio text-center">
<label>
<input type="radio"
value="{{contact.contact_id}}"
ng-checked="showContactID == {{contact.contact_id}}"
ng-model="transaction.contact_id">
<img src="public/img/profiles/{{contact.contact_id}}.jpg"
class="img-circle"
height="150">
<h4>{{contact.contact_name}}</h4>
</label>
</div>
</div>
<div class="row text-center">
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('prev')">
<i class="fa fa-chevron-left fa-2x"></i></a>
</div>
<div class="col-xs-6">
<a class="btn"
ng-click="changeContact('next')">
<i class="fa fa-chevron-right fa-2x"></i></a>
</div>
</div>
CSS
.transaction .form-group.contacts input {
display: none;
}
.transaction .form-group.contacts .radio {
padding-left: 0;
}
JavaScript
$scope.changeContact = function(which){
var currentContactID = $scope.showContactID;
var newContactID = 0;
if(which){
angular.forEach($scope.contacts, function(contact, key){
if(contact.contact_id == currentContactID){
if($scope.contacts[which == 'next' ? key + 1 : key - 1] == undefined){
newContactID = $scope.contacts[which == 'next' ? 0 : $scope.contacts.length - 1].contact_id;
}
else{
newContactID = $scope.contacts[which == 'next' ? key + 1 : key - 1].contact_id;
}
}
});
$scope.showContactID = newContactID;
}
};