I have a group of radio buttons that are generated using an ng-repeat directive, following the guidance provided in this helpful answer. However, I am struggling to understand how to integrate an ng-model into this setup.
<tr ng-repeat="service in selectservice.services track by $index">
<td>
<input type="radio" name="serviceSelections" ng-value="{{service.name}}" id="service{{service.name}}">
</td>
<td>
<h3>
{{service.name}}
</h3>
<p>{{service.caption}}</p>
</td>
</tr>
This is the related controller code:
(function() {
'use strict';
angular.module('pb.ds.selectservice').controller('SelectServiceController', function($log) {
var _this = this;
_this.selectedService = 0;
_this.services = [
{
selected: false,
name: 'Postmates',
caption: 'Guaranteed delivery within time'
},
{
selected: true,
name: 'Deliv',
caption: 'Guaranteed delivery within time',
},
{
selected: false,
name: 'Roadie',
caption: 'Guaranteed delivery within time',
}
];
});
})();
In the routing configuration for this view:
content: {
controller: 'SelectServiceController as selectservice',
templateUrl: 'modules/select-service/templates/select-service.html'
},
Currently, the radio button group correctly displays the second option as selected. However, I'm unsure about how to update the model and what exactly constitutes the model. I have attempted to use
ng-model="selectservice.selectedService"0, but in doing so, no radio button remains selected.