bind dropdown and set selected value using angularJS - angularjs

Question

I have a form which populates location data, using angularJS. The form has 3 dropdowns for Location Type, Time Zone and Parent. For an existing location, I want the attributes to be selected in the dropdowns when the data is loaded. However, in following implementation, the dropdowns are populated, but the values are not selected.
HTML:
<tr>
<td style="width:20%"><label for="locationType">{{'_LocationTypeLabel_' | i18n}}:</label></td>
<td style="width:25%"><select data-ng-model="vm.locationSettings.basicSettings.locationType.locationTypeId" data-ng-options="l.locationTypeDisplayName for l in vm.locationTypes track by l.locationTypeId" /></td>
<td style="width:20%"><label for="parent">{{'_LocationParentLabel_' | i18n}}:</label></td>
<td style="width:25%"><select data-ng-model="vm.locationSettings.basicSettings.parent" data-ng-options="l.locationName for l in vm.parentLocations track by l.locationId" /></td>
</tr>
<tr>
<td style="width:20%"><label for="timezone">{{'_TimeZonesLabel_' | i18n}}:</label></td>
<td style="width:25%"><select data-ng-model="vm.locationSettings.basicSettings.timeZone" data-ng-options="l.displayName for l in vm.timeZones track by l.timeZoneId" /></td>
<td></td>
<td></td>
</tr>
controller:
function loadLocationData() {
clientcontext.clientlookup.getAllPublic().then(function (data) {
for (var i = 0; i < data.results.length; i++) {
vm.locationTypes.push(data.results[i]);
}
clientcontext.location.getLocations(vm.clientId, 1)
.then(function (data) {
for (var i = 0; i < data.length; i++) {
vm.parentLocations.push(data[i]);
}
systemcontext.systemlookup.getTimeZones()
.then(function (data) {
for (var i = 0; i < data.length; i++) {
vm.timeZones.push(data[i]);
}
//set the location attributes
vm.locationSettings.basicSettings = basicSettingsFactory.init().then(function () {
systemcontext.systemlookup.getTimeZoneById(vm.locationSettings.basicSettings.timeZone)
.then(function (data) {
vm.locationSettings.basicSettings.timeZone = data;
});
});
});
});
});
}
the location attributes are populated using a separate factory, as - vm.locationSettings.basicSettings = basicSettingsFactory.init()
function basicSettingsFactory($q, $http, $route, $location, $rootScope, $window, common, clientcontext, localize) {
var basicLocationSettings = {};
function getLocationDetails() {
clientcontext.location.getLocationById($route.current.params.clientId, $route.current.params.id)
.then(function (data) {
basicLocationSettings.id = data.locationId;
basicLocationSettings.parent = data.fkParentLocationId;
basicLocationSettings.locationType = data.locationType;
basicLocationSettings.locationName = data.locationName;
basicLocationSettings.locationDisplayName = data.locationDisplayName;
basicLocationSettings.locationCode = data.locationCode;
basicLocationSettings.isActive = data.activeStatus;
basicLocationSettings.timeZone = data.fkTimeZoneId;
});
}
return {
// Initializes the entire monitoring probe scope variables.
init: function () {
getLocationDetails();
return basicLocationSettings;
}
};
}
})();
Can someone please point out what I'm doing wrong, that doesn't set the selected value in the dropdowns?
Thanks in advance
UPDATE:
Could the issue be that, the attribute locationtype has a integer value like 3, but what's bound to the dropdown is a LocationType object?

Answer 1

Look your updated code, it might help you.
function basicSettingsFactory($q, $http, $route, $location, $rootScope, $window, common, clientcontext, localize) {
var basicLocationSettings = {};
// Need to put the default Ids for selection display.
//The code look like this
basicLocationSettings.id = default; //defaylt Id
function getLocationDetails() {
clientcontext.location.getLocationById($route.current.params.clientId, $route.current.params.id)
.then(function (data) {
basicLocationSettings.id = data.locationId;
basicLocationSettings.locationName = data.locationName;
basicLocationSettings.locationDisplayName = data.locationDisplayName;
});
}
return {
// Initializes the entire monitoring probe scope variables.
init: function () {
getLocationDetails();
return basicLocationSettings;
}
};
}
})();