title: Resetting a select box in Angular JS with a only one option
body: <p>I don't know if what I'm experiencing is a bug, but I can't seem to reset a select box in Angular JS 1.0.2 (also tested with 1.1.5) where there is only one option. This is for a iPad app wrapped in Phonegap. I've tested in the browser (Safari, Chrome) though and the issue is still there.</p>
  
  <p>I'm working on an app that has many products that are in different categories and sub-categories. When you select a category the route changes and normally resets the select box. And it looks like so:</p>
  
  <p><img src="https://i.stack.imgur.com/0Orqi.png" alt="enter image description here"></p>
  
  <p>However, if you were to choose an option and then decide to choose another sub-category when there is only one option in the select box for a sub-category (when the user clicks one of the images where it says "Other Products") the select box doesn't properly reset. The userthen can't advance from this point to the next select box. It looks like this:</p>
  
  <p><img src="https://i.stack.imgur.com/uQ7ig.png" alt="enter image description here"></p>
  
  <p>I've almost gotten it to work by coming up with this function from the various resources out there, but seems Angular is being quirky. It looks like this with where I've got so far:</p>
  
  <p><img src="https://i.stack.imgur.com/KywIf.png" alt="enter image description here"></p>
  
  <p>The problem is that I want the blank space to be before the option, not after. Then the user has to click the second blank option and then click the option again in order to activate the second select box. </p>
  
  <p>Here is the JS:</p>
  
  <pre><code> $scope.reset = function() {
      $scope.variants.selectedIndex = 0;
  };
  </code></pre>
  
  <p>Here is the JSON. Notice that these set of variants have the same size:</p>
  
  <pre><code>1: {
        name: 'Super Awesome Product',
        description: 'Cool description',
        category: 'viewers',
  
        variants: {
      1: {
           color: 'Gold',
           size: '55-62mm',
           productCode: 'FCSTVG',
           price: 0,
           image: [path + 'FCSTVG-T.png', path + 'FCSTVG.png']
         },
      2: {
           color: 'Silver',
           size: '55-62mm',
           productCode: 'FCSTVS',
           price: 0,
           image: [path + 'FCSTVS-t.png', path + 'FCSTVS.png']
         }
       }
     }
   };
  </code></pre>
  
  <p>And the HTML for the select box:</p>
  
  <pre><code>&lt;select ng-model="selectedVariant" ng-show="variants != null"&gt;
      &lt;option ng-repeat="size in variants" value="{{size}}"&gt;
          {{size[0].size}}
  &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>And the HTML for the where my <code>reset()</code> is clicked. Like I had said, these are the "Other Products" of images below:   </p>
  
  <pre><code>&lt;div class="other-products"&gt;
     &lt;h2&gt;Other products&lt;/h2&gt;
        &lt;div class="slide-container"&gt;
          &lt;ul ng-show="products != null" style="width: {{products.length * 112}}px"&gt;
         &lt;li ng-repeat="p in products" ng-show="findDefaultImage(p) != null"&gt;
            &lt;a href="#" eat-click ng-click="selectProduct(p.id);reset()"&gt;
           &lt;img ng-src="{{findDefaultImage(p)}}" alt="" /&gt;
            &lt;/a&gt;
         &lt;/li&gt;
       &lt;/ul&gt;
         &lt;/div&gt;
   &lt;/div&gt;
  </code></pre>
  
  <p>I've tried everything, like adding different values to this line <code>$scope.variants.selectedIndex = 0;</code> like -1 or 1. </p>
  
  <p>Any help would be appreciated!</p>
  
  <p>UPDATE:  I solved the issue by hardcoding it. Didn't know why I didn't do it before, but I'm still endorsing @Shawn Balestracci answer as it answers the question. </p>
  
  <p>Angular has a tendency to empty out the "index 0" of a select box pushing all of the options back 1 in the select box, but in actuality the option that a user selects is actually the next option in the drop down list. I don't know if this is a bug or a feature. </p>
  
  <p>Here's how I hardcoded the HTML: </p>
  
  <pre><code>&lt;select ng-model="selectedVariant" required="required" ng-show="variants != null"&gt;
      &lt;option style="display:none" value=""&gt;PICK ONE:&lt;/option&gt;
      &lt;option ng-repeat="size in variants" value="{{size}}"&gt;
          {{size[0].size}}
  &lt;/option&gt;
  &lt;/select&gt;
  </code></pre>
  
  <p>This stops Angular from pushing back the options in the drop down.</p>