After retrieving JSON data from the server, it looks something like this:
$scope.StateList = {"States": [
{
"Id": 1,
"Code": "AL",
"Name": "Alabama"
},
{
"Id": 2,
"Code": "AK",
"Name": "Alaska"
},
{
"Id": 3,
"Code": "AZ",
"Name": "Arizona"
},
{
"Id": 4,
"Code": "AR",
"Name": "Arkansas"
}]}
$scope.Address = {"Address": {
"Address1": "123 Maple" ,
"Address2": null,
"City": "Tempe",
"State": "AZ",
"ZipCode": null,
"Country": null,
"Id": 0,
"Latitude": 0,
"Longitude": 0
}}
A select setup has been implemented as shown below:
<select ng-model="Address.State">
<option ng-repeat="template in StateList.States">{{template.Code}}</option>
</select>
The goal is to bind the Address.State field to the selected value, setting it as the initial option for the select input. So far, I have been struggling with achieving this and would appreciate any guidance on what might be missing. Here is a plunker where you can interact with a live version.