Resetting a select box in Angular JS with a only one option

Question

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.

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:

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:

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:

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.

Here is the JS:

 $scope.reset = function() {
    $scope.variants.selectedIndex = 0;
};

Here is the JSON. Notice that these set of variants have the same size:

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']
       }
     }
   }
 };

And the HTML for the select box:

<select ng-model="selectedVariant" ng-show="variants != null">
    <option ng-repeat="size in variants" value="{{size}}">
        {{size[0].size}}
</option>
</select>

And the HTML for the where my reset() is clicked. Like I had said, these are the "Other Products" of images below:

<div class="other-products">
   <h2>Other products</h2>
      <div class="slide-container">
        <ul ng-show="products != null" style="width: {{products.length * 112}}px">
       <li ng-repeat="p in products" ng-show="findDefaultImage(p) != null">
          <a href="#" eat-click ng-click="selectProduct(p.id);reset()">
         <img ng-src="{{findDefaultImage(p)}}" alt="" />
          </a>
       </li>
     </ul>
       </div>
 </div>

I've tried everything, like adding different values to this line $scope.variants.selectedIndex = 0; like -1 or 1.

Any help would be appreciated!

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.

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.

Here's how I hardcoded the HTML:

<select ng-model="selectedVariant" required="required" ng-show="variants != null">
    <option style="display:none" value="">PICK ONE:</option>
    <option ng-repeat="size in variants" value="{{size}}">
        {{size[0].size}}
</option>
</select>

This stops Angular from pushing back the options in the drop down.

Answer 1

In your reset function just change $scope.selectedVariant to a value that isn't in the list. It's the value stored in that model that will determine which option is selected (and vice-versa.)

You should also be able to take advantage of the ngOptions directive isntead of creating them via ng-repeat. http://docs.angularjs.org/api/ng.directive:select

 $scope.reset = function() {
    $scope.selectedVariant = {};
};

Answer 2

So if there is only one option, why use a select box? Or should the second option be "none".

In anycase, if you could put together a simple jsfiddle, that would help folks better see the problem and be able to play with it and hopefully find you an answer.

Answer 3

I disagree with resetting the select model to an empty object. That will blank out the list of options you may have there. Instead you can set the selected option to zero using the model:

$scope.reset = function() {
    $scope.selectedVariant = 0;
};