Why is the value of the selected option reading as undefined?

Question

I've looked at several other examples for ng-option on overflow, but nothing seems to work when trying to read the selected value in my dropdown menu. It always prints out as undefined.

specifically the issue I'm having is that my function call under ng-change is printing out undefined.

This is the most recent example I followed AngularJs Get the value of the selected option

<div class="widget-usb-backup dialog" ng-init="init()" ng-controller="UsbBackupController">
<div class="dialog-content-wrapper">
    <div class="dialog-content">
        <div class="heading inner-content usb-backup-title">{{ "COMMON_LOC_COPY_TO_USB" | translate}}</div>
        <div class="dialog-msg inner-content usb-backup-instruction">{{ "LOC_USB_BACKUP_MESSAGE" | translate}}</div>
        <div class="code-content inner-content "> 
                    <div class="dropdown-list" ng-controller="collapsible-controller" layout-align="center">
                        <select ng-model="selectedDevice" ng-options="device for device in allExternalStorageDevices" ng-change="selectExternalStorageDevice();collapse();" ng-controller="UsbBackupController">
                        </select>
                    </div>

            <div class="button-container inner-content">
                    <button class="button button-green button-long" value="" ng-click="submit()" es-enter="submit()">
                    {{ "COMMON_LOC_COPY_TO_USB" | translate}}</button>
                </div>
            </form>
        </div>
        <div class="dialog-additional-links">
            <a href="javascript:void(0)" class="cancel-link" ng-click="closeModal()">{{ "COMMON_LOC_CANCEL" | translate}}</a>
        </div>
    </div>
</div>

Answer 1

If you use like that it will work..

<select name="repeatSelect" id="repeatSelect" ng- model="data.model">
      <option ng-repeat="option in data.availableOptions" value="{{option.id}}">{{option.name}}</option>
</select>

Reference - angular docs