Trying to use the latest version (1.5.8) of AngularJS and ng-options to populate a dropdownlist.

Issue is that it's adding the data type as well as the value, like so:

<select class="possedetail ng-valid ng-dirty ng-valid-parse ng-touched" ng-model="Province" ng-options="p as p for p in provList">
<option value="string:ALBERTA" label="ALBERTA">ALBERTA</option>
<option value="string:BRITISH COLUMBIA" label="BRITISH COLUMBIA">BRITISH COLUMBIA</option></select>

I need string:Alberta'...

This is my data source:

$scope.provList = ["ALBERTA","BRITISH COLUMBIA","MANITOBA","NEW BRUNSWICK","NEWFOUNDLAND AND LABRADOR","NORTHWEST TERRITORIES","NOVA SCOTIA","NUNAVUT","ONTARIO","PRINCE EDWARD ISLAND","QUEBEC","SASKATCHEWAN","YUKON",];

I have read the google documentation, searched the web and tried changing my data source format to [{name: "Alberta"}, {name:"BC"}]...

Please help, any way around this?

Trying to use the latest version (1.5.8) of AngularJS and ng-options to populate a dropdownlist.

Issue is that it's adding the data type as well as the value, like so:

<select class="possedetail ng-valid ng-dirty ng-valid-parse ng-touched" ng-model="Province" ng-options="p as p for p in provList">
<option value="string:ALBERTA" label="ALBERTA">ALBERTA</option>
<option value="string:BRITISH COLUMBIA" label="BRITISH COLUMBIA">BRITISH COLUMBIA</option></select>

I need string:Alberta'...

This is my data source:

$scope.provList = ["ALBERTA","BRITISH COLUMBIA","MANITOBA","NEW BRUNSWICK","NEWFOUNDLAND AND LABRADOR","NORTHWEST TERRITORIES","NOVA SCOTIA","NUNAVUT","ONTARIO","PRINCE EDWARD ISLAND","QUEBEC","SASKATCHEWAN","YUKON",];

I have read the google documentation, searched the web and tried changing my data source format to [{name: "Alberta"}, {name:"BC"}]...

Please help, any way around this?

• javascript
• angularjs
• ng-options

• 1 Are you looking at the value attribute of generated options? Don't. You shouldn't care about that. The only thing you ought to care about is the model value - i.e. $scope.Province – New Dev Commented Jul 22, 2015 at 22:41
• 1 This is a perfectly legitimate question, which still hasn't been resolved yet. When you downvote, explain why, unless you're just being sad. I see SO is no longer a place to get help but a place where people come to prove they're better than you. – OverMars Commented Jul 23, 2015 at 14:38
• Are you referring to me? I didn't downvote. Although the question could be better phrased to explain the why, I also don't understand the downvotes. But what do you mean by "not resolved"? The answer I provided should resolve you issue – New Dev Commented Jul 23, 2015 at 15:29
• 2 A valid reason for wanting to remove the data type would be a form which posts directly to the server and bypasses angularjs. I do this for downloading .csv and excel data. Valid question, even if the question was not well understood by the asker. – steampowered Commented Oct 27, 2015 at 18:46
• 1 I advise you to state the angular version that you're using instead of saying "the latest version". This way, this thread can be helpful in the future, when different versions of angular get released. – gion_13 Commented Mar 20, 2017 at 8:28

3 Answers 3

This might be a little late, but adding "track by" to your ng-options expression should solve your problem. i.e.

<select ng-model="Province" ng-options="p for p in provList track by p"></select>

If you are properly designing your Angular app, you should not care how <option> elements are generated and what value attribute is assigned. This is the View. The ViewModel is what is set on the scope variable that you assigned to it.

In other words, your example works. $scope.Province will equal the selected province string, e.g. "ALBERTA". Angular does the translation for you.

Then, you could submit it to your server, or do whatever you need with it:

$http.post("/some/api", {data: $scope.Province})

But, if you must, you could generate the <option>s with ng-repeat. It would be less efficient and more verbose, but it would work:

<select ng-model="Province">
  <option ng-repeat="p in provList" value="{{p}}">{{p}}</option>
</select>

Can't tell much with out more code, can you do a fiddle. This works fine http://jsfiddle.net/zm0eq6xf/

<div ng-app="myapp">
    <fieldset ng-controller="FirstCtrl">
        <select 
        ng-options="p for p in provList"
        ng-model="p"></select>
    {{ p }}
</fieldset>