Binding array to Options in angular doesn't work

Question

I have a controller defined as

 var searchController = function ($scope, $http) {
    $scope.modSelectedState = null;
    $scope.states = [];
    $http.get('./data/states.js')
       .success(function (data) {
           $scope.states = data.locations;
       })
}

Its job for now is to populate the list of states which I consume (successfully) from a local file.

Then, I have this code in my HTML file:

 <select ng-model="modSelectedState" id="selectState" name="selectState"
         ng-options="state as state.name for state in states">
          <option value="">Select state...</option>
 </select>

Which I cannot get to work. I know that my controller is defined properly and that the array is being populated successfully because i tried the following piece of code and it worked fine:

<ul ng-repeat="state in states">
       <li>{{state.name}}</li>
 </ul>

I placed this code right before the options code under the scope of the same controller of course.

A JSON object in my array looks like this:

   {
        "lat": 35.02499,
        "long": -84.92153,
        "name": "Alabama",
        "short": "AL"
    }

Cannot figure out why it is not working..

possible duplicate of How to set value property in angularjs ng-options? — PM 77-1
– PM 77-1, Commented Sep 7, 2014 at 1:20

PM 77-1 · Accepted Answer · 2014-09-07 01:53:03Z

2

Instead of

ng-options="state as state.name for state in states"

try

ng-options="state.name for state in states"

Regarding modSelectedState try the following:

...
   .success(function (data) {
       $scope.states = data.locations;
       $scope.modSelectedState = $scope.states[1];  // 1 is just an arbitrary element
'''

See Angular docs and examples.

edited Sep 7, 2014 at 1:53

answered Sep 7, 2014 at 1:19

PM 77-1

13.4k21 gold badges73 silver badges118 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

David Barel Over a year ago

Thanks. I tried your suggestion but it didn't work. Also, I have been using the same code in a few other projects and it works fine just as it is, and that's the weird thing about all this.

PM 77-1 Over a year ago

"Did not work" is not very informative. Any errors? Have you tried debugging?

David Barel Over a year ago

Sorry about that. Didn't work means that I was not able to populate the list. I don't see any errors in the debugger.

PM 77-1 Over a year ago

Have you tried to populate modSelectedState (not leave it null)?

David Barel Over a year ago

No I haven't. Normally I don't even set it to null and it is working. What are you suggesting?

|

Collectives™ on Stack Overflow

Binding array to Options in angular doesn't work

1 Answer 1

11 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

11 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related