angularjs - ng-model not binding with ng-options selection

Question

This question already has answers here: question from:https://stackoverflow.com/questions/65915197/ng-model-not-binding-with-ng-options-selection

Answer 1

I managed to reproduce your issue and also to solve it.

You need to replace your ng-if with ng-show like so:

<div class="modal-footer"></div>
        <nav class="navbar navbar-expand">
            <ul class="navbar-nav ml-auto">
                <li class="nav-item mx-2" id="sizesOptions"
                    ng-show="selectedModalItem.hasVariant">Options:
                    <select ng-model="chosenVariant"
                            ng-options="variant for variant in selectedModalItem.variants">
                    </select>
                </li>
                <li class="nav-item mx-2"><b>${{selectedModalItem.itemPrice}}</b>USD</li>
                <li class="nav-item mx-2">
                  <a type="button"
                     class="fas fa-shopping-cart navTextPink fa-2x"
                     ng-click="addToCart()">
                  </a>
                </li>
            </ul>

        </nav>

ng-if will remove elements from the DOM, this way you can't bind an unexisting element. This problem is solved using ng-show.

I recommend to explore a bit about the differences between the two