Ng-options to select grouped option A to show option B


#1

I am using ionic 1. I would like to making a booking function, users first select the date, then the according time will be shown for selection. I have studied ng-options and tried lots of ways, but it still not worked. Below is my current wrong code. May you please have a help ? Many thanks.

booking.js

$scope.bookingdates = [{
    date: '5-Oct',
    time: '3pm'
  }, {
    date: '5-Oct',
    time: '5pm'
  }, {
     date: '5-Oct',
    time: '10pm'
  }, {
    date: '3-Oct',
    time: '5pm'
}];

booking.html

<select ng-model="filter.date" ng-model="selectedItem1" ng-options="bookingdate.time group by bookingdate.date for bookingdate in bookingdates"></select>
<!— I would like to group the duplicated booking date and to be selected —>
<select ng-show="::filter.date" 
          ng-model="filter.time" 
          ng-options="bookingdate.time for bookingdate in bookingdates | filter:{ filter.date }">
</select>
<!— I would like to let the user to select the time slots of selected date —>

Uploaded the code :

The problem is that I can’t select the date in first dropdown (as it’s group by) then show second dropdown to select the corresponding time.
Any idea ? Thanks.