Working with select boxes in angularjs (selected index and default option)

Question

I'm new at angular. I used to have a select box that was populated using ng:repeat:

<select ng-model="selectedAddress" ng-change="handleStoredAddressClick2()"  id="address_dropdown">
    <option value="-1" selected="selected">Add a new address</option>
    <option ng:repeat="stored_address in address_dropdown" value="{{$index}}">{{stored_address.dropdown_display}}</option>
</select>

The HTML it generated looks like this:

<select id="address_dropdown" ng-change="handleStoredAddressClick2()" ng-model="selectedAddress" class="ng-pristine ng-valid">
    <option value="? undefined:undefined ?"></option>
    <option selected="selected" value="-1">Add a new address</option>
     <option value="0" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding">602 BLOWING ROCK RD APT. 2 BOONE, NC 28607</option>
     <option value="1" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding">TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
</select>

I have a function that runs on ng-click:

$scope.handleStoredAddressClick2 = function () {
        var address = $scope.address_dropdown[$scope.selectedAddress];
        $scope.streetaddr = address.address
        $scope.search_near = address.zip;

        var disp_addr = address.address;
        if (address.address_two) {
            disp_addr += ', ' + address.address_two;
        }
        if (typeof disp_addr != 'undefined' && disp_addr.toTitleCase) {
            disp_addr = disp_addr.toTitleCase();
        }
        $scope.streetaddr = disp_addr;
        $scope.stored_addr_key = address.key;
        $scope.cityname = address.city;
        $scope.statename = address.state; 

        $scope.fetch();
    };

The second line of the function grabbed the {{$index}} value that was set in the ng:repeat value property. (So, 0 or 1 in this case.)

I was recently told that you shouldn't use ng:repeat to populate select boxes; that you should use ng-options instead. So I updated my select box to this:

<select ng-model="selectedAddress" ng-init="selectedAddress = selectedAddress || address_dropdown[0].value" ng-change="handleStoredAddressClick2()" ng-options="a.dropdown_display for a in address_dropdown"  id="address_dropdown">
   <option value="-1" ng-selected="selected">Add a new address</option>
</select>

This is the HTML that generates:

<select id="address_dropdown" ng-options="a.dropdown_display for a in address_dropdown" ng-change="handleStoredAddressClick2()" ng-model="selectedAddress" class="ng-pristine ng-valid">
    <option value="?" selected="selected"></option>
    <option value="0">602 BLOWING ROCK RD APT. 2 BOONE, NC 28607</option>
    <option value="1">TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810</option>
</select>

It's essentially the same, especially the option values. But I now get an error on change, saying address is undefined. So for some reason, $scope.address_dropdown[$scope.selectedAddress]; no longer works to grab the selected index value of the dropdown on change, even though the actual index values are the same regardless of how the code is generated.

Can anyone explain why that is the case, and how I can get the selected index value of a select box populated with ng-options? Can I also get an answer as to why the text of the default selected option I set in the second set of code (repeated below) ends up displaying blank?

Code: Add a new address

Rendered:

Answer 1

I'm not following this example completely, but it looks like you are trying to retrieve the address selected in the dropdown?

So you have this:

ng-options="a.dropdown_display for a in address_dropdown"

and this:

ng-model="selectedAddress"

Your dropdown is bound to the members of address_dropdown, so this code is unnecessary:

var address = $scope.address_dropdown[$scope.selectedAddress];

$scope.selectedAddress should already contain the complete address object that is a member of address_dropdown. No need to muck about with an index.