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?](http://stackoverflow.com/questions/12139152/how-to-set-value-property-in-angularjs-ng-options) — PM 77-1, Sep 07 '14 at 01:20

PM 77-1 · Accepted Answer · 2014-09-07T01:53:03.537

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 07 '14 at 01:53

answered Sep 07 '14 at 01:19

PM 77-1

12,933
21
68
111

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. – David Barel Sep 07 '14 at 01:22
"*Did not work*" is not very informative. Any errors? Have you tried debugging? – PM 77-1 Sep 07 '14 at 01:30
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. – David Barel Sep 07 '14 at 01:33
Have you tried to populate `modSelectedState` (not leave it `null`)? – PM 77-1 Sep 07 '14 at 01:41
No I haven't. Normally I don't even set it to null and it is working. What are you suggesting? – David Barel Sep 07 '14 at 01:43
Just select any element by index as the first shown. I added such code to my answer. Also see http://jsfiddle.net/qWzTb/ I'm **no** Angular expert but you case seems rather straight-forward. – PM 77-1 Sep 07 '14 at 01:54
If you still have a problem it may be worth for you to create a [JS Fiddle](http://jsfiddle.net/) of your own with the minimal code that demonstrates the problem. – PM 77-1 Sep 07 '14 at 01:57
It's too complicated to upload the project to jsfiddle. It has too many files. It seems that everything is ok with the code, but still have no idea why it is not working. Maybe a conflict with some other plugins...but why the test code works if so (ng-repeat)? – David Barel Sep 07 '14 at 04:23
I did not suggest to replicate you entire application. Just the part with the problem. Shortcut everything else. For example, replace AJAX calls with hard-coded arrays. Start chopping the stuff away. You will either solve your problem in the process or give us a better chance to help you. – PM 77-1 Sep 07 '14 at 15:16
Thanks for the advice. I isolated the code and uploaded it to plunker and it worked fine. The exact same code. I think there is some sort of conflict with another plugin that is installed. Not sure how to continue but obviously the code i posted is OK. – David Barel Sep 07 '14 at 16:50
Sorry if I state obvious things but you need to start adding stuff to your fiddle until either you break it or exhaust the scope of what can be run inside Fiddle. You seem to have mentioned that similar code worked on the same system as the one with a problem. If this is still the case you will need to compare them in detail paying attention to the order of JS and CSS files. – PM 77-1 Sep 07 '14 at 20:17

Binding array to Options in angular doesn't work

1 Answers1