AngularJS : Why is my ng-change not logging the actual model item, but instead the binding text?

Question

My model is the array vh.loadedViews with 4 items.

My ng-repeat on the option: ng-repeat="view in vh.loadedViews"

my ng-model on the select: ng-model="view.description"

However in my ng-change function vh.chooseView it's printing out the binding text and not the actual model data.

Markup:

<section class="saved-views-modal" ng-show="vh.loadSavedModal">
    <header><h1>Select a saved view</h1></header>

    <select name="select"
            ng-model="view.description"
            ng-change="vh.chooseView(view.description)">

        <option ng-repeat="view in vh.loadedViews"
                value="view.description">{{view.description}}</option>
    </select>

    <button class="btn-green"
            ng-click="vh.loadSavedView(view.description)">
                Load View
    </button>
</section>

Directive Controller:

var vm = this; // vh in markup

vm.chooseView = function(description) {
    console.log('chooseView > view.description: ');
    console.log(description);
}

Answer 1

You have not populated value tag of your options. You should populate it using interpolation like value="{{view.description}}" to render option value.

Also you ng-model should be ng-model="vh.description" instead of view.description

Markup

<select name="select"
        ng-model="vh.description"
        ng-change="vh.chooseView(view.description)">

    <option ng-repeat="view in vh.loadedViews"
            value="{{view.description}}">{{view.description}}</option>
</select>