How to place uib-datepicker inside <select> - angularjs

Question

I use AngularJs and like to display <select> if dates are available, if not I like to put uib-datepicker inside <select>.
Let me explain again, if dates are available clicking <select> makes dates are coming out, if dates are not available, clicking <select> will make uib-datepicker display.
I have html code for multi-datepicker.tpl.html.
<div class="uib-datepicker" ng-switch="datepickerMode" role="application" ng-keydown="keydown($event)">
<uib-daypicker ng-switch-when="day" tabindex="0" template-url="app/travels/views/multi-day.tpl.html"></uib-daypicker>
<uib-monthpicker ng-switch-when="month" tabindex="0"></uib-monthpicker>
<uib-yearpicker ng-switch-when="year" tabindex="0"></uib-yearpicker>
</div>
For that what I did in my html code is
<div class="row travel-reviews">
<select ng-model="selectedSeats" ng-change="totalAmountCal()" ng-options="seat as seat.seat for seat in seats">
<option value="" selected disabled>Select no of seats </option>
</select>
<select ng-show="dateLength" ng-model="selectedDate" ng-options="date as date for date in selectedDates">
<option value="" selected disabled>Select date </option>
</select>
<select ng-show="!dateLength" >
<uib-datepicker ng-model='selectedDate' multi-select='selectedDates' template-url='app/travels/views/multi-datepicker.tpl.html'></uib-datepicker>
</select>
</div>
Now the problem are (1) datepicker is not in the select and (2) second one overwrite the first one.
How to solve the problem? When dates are available $scope.dateLength is true and not available $scope.dateLength is false.
EDIT:
<div class="row travel-reviews">
<select ng-model="selectedSeats" ng-change="totalAmountCal()" ng-options="seat as seat.seat for seat in seats">
<option value="" selected disabled>Select no of seats </option>
</select>
<select ng-show="dateLength" ng-model="selectedDate" ng-options="date as date for date in selectedDates">
<option value="" selected disabled>Select date </option>
</select>
<div ng-show="!dateLength">
<b style="font-size:15px; color:blue">Please select date</b>
<section>
<table>
<tr>
<td>
<uib-datepicker ng-model='selectedDate' multi-select='selectedDates' template-url='app/travels/views/multi-datepicker.tpl.html'></uib-datepicker>
</td>
<td style='width:10px'></td>
</tr>
</table>
</section>
</div>
</div>
multi-day.tpl.html
<table class="uib-daypicker" role="grid" aria-labelledby="{{::uniqueId}}-title" aria-activedescendant="{{activeDateId}}">
<thead>
<tr>
<th>
<button type="button" class="btn btn-default btn-sm pull-left uib-left" ng-click="move(-1)" tabindex="-1">
<i class="glyphicon glyphicon-chevron-left"></i>
</button>
</th>
<th colspan="{{::5 + showWeeks}}">
<button id="{{::uniqueId}}-title" role="heading" aria-live="assertive" aria-atomic="true" type="button" class="btn btn-default btn-sm uib-title" ng-click="toggleMode()" ng-disabled="datepickerMode === maxMode" tabindex="-1">
<strong>{{title}}</strong>
</button>
</th>
<th>
<button type="button" class="btn btn-default btn-sm pull-right uib-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button>
</th>
</tr>
<tr>
<th ng-if="showWeeks" class="text-center"></th>
<th ng-repeat="label in ::labels track by $index" class="text-center">
<small aria-label="{{::label.full}}">{{::label.abbr}}</small>
</th>
</tr>
</thead>
<tbody>
<tr class="uib-weeks" ng-repeat="row in rows track by $index">
<td ng-if="showWeeks" class="text-center h6">
<em>{{ weekNumbers[$index] }}</em>
</td>
<td ng-repeat="dt in row" class="uib-day text-center" role="gridcell" id="{{::dt.uid}}" ng-class="::dt.customClass">
<button type="button" class="btn btn-default btn-sm" ng-class="{'btn-info': dt.selected, active: isActive(dt)}" ng-click="select(dt.date)" ng-disabled="::dt.disabled" tabindex="-1">
<span ng-class="::{'text-muted': dt.secondary, 'text-info': dt.current}">{{::dt.label}}</span>
</button>
</td>
</tr>
</tbody>
</table>