如何避免使用ng-hide和ng-show以角度显示两个元素

Question

我有两个不同选择的页面，一个显示场地在AM中打开的时间，另一个显示在PM中打开的时间。我正在使用ng-hide和ng-show对不同选择的值来决定要显示哪个选项。它工作正常，但是一瞬间它会在页面上显示两个选项，无论如何都要避免这种情况吗？ 我的代码：

<div class="col-xs-6">
      <label class="control-label">Time</label>
      <select class="form-control" ng-model="referral.reservationTime" ng-show="referral.reservationTimeAmOrPm === 'AM'">
        <option selected="true" disabled="disabled">Select a Time</option>
        <option ng-repeat="hour in amHours">{{hour | militaryToStandardTimeNoAmOrPm}}</option>
      </select>
      <select class="form-control" ng-model="referral.reservationTime" ng-hide="referral.reservationTimeAmOrPm === 'AM'">
        <option selected="true" disabled="disabled">Select a Time</option>
        <option ng-repeat="hour in pmHours">{{hour | militaryToStandardTimeNoAmOrPm}}</option>
      </select>
    </div>
  </div>