Reset Angular dropdown option in Ionic - won't reset after value is changed from initial value

Question

I'm trying to figure out why I can't seem to wrangle a simple angular dropdown reset.

When the view loads, you hit the button "Reset", and it changes whatever value is selected to a different one, based on what the functionality in the controller dictates. This works fine on page load, but if you change the value in the dropdown THEN click "Reset", it does nothing. It doesn't reset the dropdown as specified in the function and I can't figure it out.

Steps to reproduce:

1. Page loads
2. Click "Reset" button
3. Dropdown value changes to "Japanese"
4. Change the value back to "English"
5. Click "Reset" button
6. Nothing. It should change the value back to English, but doesn't.

I've boiled everything down to the most basic example using an extremely basic ionic example in my Codepen:

http://codepen.io/starshock/pen/EPdXpz

Basically, here is my controller code:

.controller('DropdownController', [ '$scope', '$state', function($scope, $state) {
        $scope.navTitle = 'Dropdown Reset';

        $scope.reset = function() {
          $scope.selectedOption = $scope.languages[0];
        }

        $scope.languages = [
          { name: "English"},
          { name: "Japanese"}
        ];
      $scope.selectedOption = $scope.languages[1];
    }]);

And here is my template:

<script id="entry.html" type="text/ng-template">
    <ion-nav-bar animation="nav-title-slide-ios7"
                 type="bar-positive"
                 back-button-type="button-icon"
                 back-button-icon="ion-ios7-arrow-back">
    </ion-nav-bar>

    <ion-view title="{{navTitle}}" class="bubble-background">

        <ion-content has-header="true" padding="true">

            <div class="item item-input item-select" href="#">
      <label>
        <div class="input-label">
          Select language
        </div>
        <select
          data-ng-options="language.name for language in languages"
          data-ng-model="selectedOption">
        </select>
      </label>
    </div>
            <button class="button button-positive" ng-click="reset()">Reset</button>

        </ion-content>
    </ion-view>
</script>

I've been struggling with this problem for months and I have a number of instances that utilize similar code. Any Angular masters have any thoughts? :D

Answer 1

You need to change your controller slightly to reference the same object each time (see https://stackoverflow.com/a/17607794/360067 and the answer referenced i.e. https://stackoverflow.com/a/14049482/360067 for the basics).

Assuming the default value you want is English (if it's Japanese, just change the index to 1 in both places)

    $scope.reset = function() {
      $scope.filter.selectedOption = $scope.languages[0];
    }

    ...

    $scope.filter = {
      selectedOption: $scope.languages[0]
    };

and in your HTML

    <select
      data-ng-options="language.name for language in languages"
      data-ng-model="filter.selectedOption">
    </select>

---

CodePen - http://codepen.io/anon/pen/KVGqOG