Binding data to a dropdown using angularjs - angularjs

Question

I have a typescript controller with an init method below. I am able to get all the data I want in the messageresult
which is good.
init() {
this.accountLocationService.getAccountLocationCollection(this.customerNumber)
.success(messageresult => {
this.acctLocationCollection = messageresult;
//alert(this.acctLocationCollection.accountlocation[0].aliasName);
})
.error(error => {
alert(error);
});
}
The acctLocationCollection can have two or more objects and I need to bind all the values of the
aliasName in a dropdown below.
How can I achive this ? This is my first AngularJs project.
<div id="acctDetail">
<p>Select an Account:</p>
<div class="selectAccount">
<select class="selAccounts" name="DeliverToCustomerNumber" ng-change="" id="DeliverToCustomerNumber"
ng-options="ac for ac in alc.acctLocationCollection.aliasName">
</select>
</div>
<div id="address">
<dl>
<dd class="acctName">{{alc.acctLocationCollection.DeliverToCompanyName}}</dd>
<dd class="acctNo">{{alc.acctLocationCollection.DeliverToCustomerNumber}}</dd>
</dl>
</div>
</div>
Data looks like this in console.log
object
accountlocation:Array[2]
0:object
aliasName:"1234"
deliverToCustomerNumber: "25235"
1:object
aliasName:"2345"
deliverToCustomerNumber: "23523"

Answer 1

You don't have an ng-model on your select so I will just assume you want to store the object from your acctLocationCollection. To do this you simply need to structure your ng-options as follows:
<select class="selAccounts"
name="DeliverToCustomerNumber"
id="DeliverToCustomerNumber"
ng-model="alc.selectedAcctLocation"
ng-options="ac as ac.aliasName for ac in alc.acctLocationCollection">
</select>
angular.module('app', [])
.controller('ctrl', function() {
this.selectedAcctLocation = {};
this.acctLocation = [{
aliasName: "1234",
deliverToCustomerNumber: "25235"
}, {
aliasName: "2345",
deliverToCustomerNumber: "23523"
}];
console.log(this.acctLocation);
});
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular.min.js"></script>
<div ng-app="app" ng-controller="ctrl as alc">
By object: <select ng-model="alc.selectedAcctLocation" ng-options="ac as ac.aliasName for ac in alc.acctLocation"></select><br/>
By (key,value): <select ng-model="alc.selectedAcctLocation" ng-options="value as value.aliasName for (key,value) in alc.acctLocation"></select>
<div style="margin-top:10px;">
alc.acctLocation:
<ul>
<li ng-repeat="(key,value) in alc.acctLocation">{{key}}: {{value}}</li>
</ul>
</div>
<div>selectedAcctLocation: {{alc.selectedAcctLocation | json}}</div>
</div>