I am having an issue with updating a form that contains multiple radio buttons based on data retrieved from an API. The challenge is that only the last set of radio buttons displays the value correctly. Below is the code snippet I am using (angular brackets denoted by double square brackets - [[ ]]):
<fieldset data-ng-repeat="s in sections">
<div class="form-group">
<div class="col-md-12">
<h2>[[ s.section.name ]]</h2>
</div>
</div>
<!-- Field Item -->
<div class="form-group m-b-20 bg-light" data-ng-repeat="f in s.fields">
<div class="col-md-12 m-b-30">
<h4>[[ f.field.name ]]</h2>
<input type="text" data-ng-model="f.comments" class="form-control input-md underline" placeholder="Comments">
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="pass" class="form-control" data-ng-model="f.field_condition">
<label class="eval-pass"><i class="fa fa-check-circle green"></i> Pass</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="fail" class="form-control" data-ng-model="f.field_condition">
<label class="eval-fail"> <i class="fa fa-exclamation-circle red"></i> Fail</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="n/a" class="form-control" data-ng-model="f.field_condition">
<label class="eval-na"> <i class="fa fa-circle blue"></i> N/A</label>
</div>
<div class="col-sm-3">
<input type="radio" name="section-[[s.section.section_id]]-field-[[f.field.field_id]]" value="caution" class="form-control" data-ng-model="f.field_condition">
<label class="eval-caution"><i class="fa fa-exclamation-triangle yellow"></i> Caution</label>
</div>
</div>
[[ f.field_condition ]]
<hr>
</fieldset>
The issue lies in the fact that only the last field in each section displays the selected radio button, while the others remain unselected. The data model seems to be properly set for each field, and manual selection also changes the model accordingly. However, the initial display doesn't reflect this. Interestingly, even if the selections are not visible initially, saving the form still updates the database correctly without setting values to null.
Could this possibly be influenced by CSS styling? The provided HTML and CSS files include custom styling for the radio buttons.
UPDATE
Despite recreating the app using the same code included in the working fiddle link, the issue persists where only the last group of radio buttons in each section displays the selected value. It remains unclear why this discrepancy exists, as the same code functions as expected in the fiddle example. Your insights on this matter would be greatly appreciated.
If you wish to examine the complete code of my new angular app to replicate the issue, it can be found here: https://pastebin.com/qSR33yfM
I have structured the app on a single page for simplicity. Additionally, the exact json data used in the application can be accessed via this pastebin link: https://pastebin.com/utfVVQfT