I am facing an issue with a form that includes a SELECT element. I have successfully loaded the possible values in my controller from a function that retrieves data from a database and groups the options by a group name.
Although the list of options is loading properly with the grouping displayed, the initial value is not showing up - which is based on a data model. It appears blank initially, but when I select any option from the list, it displays correctly.
I have followed an example from a solution Populate a Dropdown list by grouping using AngularJs, and according to other examples I have seen, this should work. I suspect there might be a minor detail that I have overlooked accidentally.
The following code loads the potential values for the drop-down:
$http.get("api/getIndustry").success(function(data){
$rootScope.industryData = [];
$.each(data, function (i, data) {
$rootScope.industryData.push({
group: data.group,
id: data.id,
text: data.text
});
});
});
Currently, I am trying to set an initial selected value (which will eventually come from reading a record):
$scope.example3model = {group: 'Energy and Natural Resources', id: '25', text: 'Utilities'};
Below is a snippet of my view:
<td colspan="4" ng-hide="editableForm.$visible">
<select ng-model="example3model" class="form-control input-md" ng-options="industry.text group by industry.group for industry in industryData" >
</select></br>
{{example3model}} <- checking what was chosen
</td>
I am unsure about what else I can do to make this work. The only issue I see at this moment is that the list does not display the 'default' value of what is initially in example3model (resulting in a blank list). However, if I choose a value from the list, it shows correctly.
Any tips or suggestions would be greatly appreciated.