title: Working with select boxes in angularjs (selected index and default option)
body: <p>I'm new at angular. I used to have a select box that was populated using <code>ng:repeat</code>:</p>
  
  <pre><code>&lt;select ng-model="selectedAddress" ng-change="handleStoredAddressClick2()"  id="address_dropdown"&gt;
      &lt;option value="-1" selected="selected"&gt;Add a new address&lt;/option&gt;
      &lt;option ng:repeat="stored_address in address_dropdown" value="{{$index}}"&gt;{{stored_address.dropdown_display}}&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>The HTML it generated looks like this:</p>
  
  <pre><code>&lt;select id="address_dropdown" ng-change="handleStoredAddressClick2()" ng-model="selectedAddress" class="ng-pristine ng-valid"&gt;
      &lt;option value="? undefined:undefined ?"&gt;&lt;/option&gt;
      &lt;option selected="selected" value="-1"&gt;Add a new address&lt;/option&gt;
       &lt;option value="0" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding"&gt;602 BLOWING ROCK RD APT. 2 BOONE, NC 28607&lt;/option&gt;
       &lt;option value="1" ng:repeat="stored_address in address_dropdown" class="ng-scope ng-binding"&gt;TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>I have a function that runs on <code>ng-click</code>:</p>
  
  <pre><code>$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' &amp;&amp; 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();
      };
  </code></pre>
  
  <p>The second line of the function grabbed the <code>{{$index}}</code> value that was set in the <code>ng:repeat value</code> property. (So, 0 or 1 in this case.)</p>
  
  <p>I was recently told that you shouldn't use <code>ng:repeat</code> to populate select boxes; that you should use <code>ng-options</code> instead. So I updated my select box to this:</p>
  
  <pre><code>&lt;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"&gt;
     &lt;option value="-1" ng-selected="selected"&gt;Add a new address&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This is the HTML that generates:</p>
  
  <pre><code>&lt;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"&gt;
      &lt;option value="?" selected="selected"&gt;&lt;/option&gt;
      &lt;option value="0"&gt;602 BLOWING ROCK RD APT. 2 BOONE, NC 28607&lt;/option&gt;
      &lt;option value="1"&gt;TEST HOUSE: 9884 BLUEBONNET BLVD BATON ROUGE, LA 70810&lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>It's essentially the same, especially the option values. But I now get an error on change, saying <code>address is undefined</code>. So for some reason, <code>$scope.address_dropdown[$scope.selectedAddress];</code> 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.</p>
  
  <p>Can anyone explain why that is the case, and how I can get the selected index value of a select box populated with <code>ng-options</code>? 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?</p>
  
  <p>Code:
      Add a new address</p>
  
  <p>Rendered:
      </p>