Here is some code I am currently working with:
<select type="text" id="{{for}}" name="{{for}}" ng-model="model.value" class="form-control input-sm" placeholder="{{placeholder}}" ng-options="c.name as c.name for c in countries track by c.code">
<option value="">— Select —</option>
</select>
The countries array is fetched from a dictionary service and structured like this:
$http.get('services/dictionary/countries').then(function(response) {
_.chain(response.data).map(function(country) {
return {
code: country.id,
digraph: country.digraph,
trigraph: country.trigraph,
name: country.name
};
}).sortBy('name').each(function(country) {
dictionary.countries.push(country);
});
deferred.resolve(dictionary.countries);
}, function(error) {
$log.error('dictionary:', error);
});
We are using the list of countries to populate a select dropdown but facing two problems. Firstly, after selecting an option and refreshing the page, the selected object does not appear in the dropdown. Secondly, we are unable to revert to a null choice when needed.
I have tried different iterations based on the ng-options setup, but haven't been successful. Any assistance would be greatly appreciated. Thank you!