选择值时动态更新下拉列表 - Ionic AngularJS

Question

我正在使用Ionic构建一个hyrbid应用程序，并且在用户选择值时需要下拉控件来更新其值。这样，用户无需点击“完成”＃34;或点击屏幕上的其他位置以更新下拉列表。这也将启用下一个控件。理想情况下，用户会选择一个值，下拉列表会更新并解锁另一个下拉列表。

DOM

<div class="col">
                <label class="item item-input">
                    <span class="input-label">When</span>
                    <input type="date" id="date" name="date" ng-model="postData.when" required>
                </label>
            </div>
            </div>

            <div class="row">
            <div class="col">
                <label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$pristine}">
                    <div class="input-label">Location</div>
                    <select id="location" name="location" ng-init="postData.location=''" ng-disabled="subForm.date.$pristine" ng-model="postData.location" required>
                        <option value="" disabled hidden></option>
                        <option value="Denver Office">Denver Office</option>
                        <option value="DJ Basin">DJ Basin</option>
                        <option value="East Mediterranean">East Mediterranean</option>
                        <option value="Gulf of Mexico">Gulf of Mexico</option>
                        <option value="Houston Office">Houston Office</option>
                        <option value="Marcellus">Marcellus</option>
                        <option value="Texas">Texas</option>
                        <option value="West Africa">West Africa</option>
                        <option value="Other">Other</option>
                    </select>
                </label>
            </div>
            </div>

            <div class="row">
            <div class="col">
                <label class="item item-input item-select" ng-class="{'disabled' : subForm.date.$untouched || subForm.location.$untouched}">
                    <div class="input-label">Observation</div>
                    <select id="observationList" name="observationList" ng-disabled="subForm.date.$untouched || subForm.location.$untouched" ng-model="postData.category" required>
            <option value="" disabled hidden></option>
                        <option value="Caught Between">Caught Between</option>
                        <option value="Dropped Object">Dropped Object</option>
                        <option value="Fall from Height">Fall from Height</option>
                        <option value="Personal Protective Equipment (PPE)">Personal Protective Equipment (PPE)</option>
                        <option value="Slip / Trip / Fall">Slip / Trip / Fall</option>
                        <option value="Strain / Overexertion">Strain / Overexertion</option>
                        <option value="Struck by">Struck by</option>
                        <option value="Spill / Release">Spill / Release</option>
                        <option value="Safe Work Practices">Safe Work Practices</option>
                        <option value="NO HARM">No Harm</option>
                        <option value="Other">Other</option>
                    </select>
                </label>
            </div>
            </div>

我尝试使用不同的角度验证检查属性，例如$ untouched，$ pristine等。但是每个人都在等待下拉列表失去焦点。