Angular Datepicker displaying twice in bootstrap modal - html

Question

I'm new to Angular JS. I was working with Angular JS calendar and am trying to display the angular Datepicker inside Bootstrap modal window. However the Datepicker is displayed twice as shown in the image below.
Here's my modal html code.
<div class="modal-header">
<h3 class="modal-title">{{ vm.event.event.title }}</h3>
</div>
<div class="modal-body" ng-repeat="event in vm.event track by $index">
<h3 class="post-subtitle">
{{event.type}}
</h3>
<table class="table table-bordered">
<thead>
<th>Starts on</th>
<th>Ends on</th>
</thead>
<tbody>
<td>
<p class="input-group" style="max-width: 250px">
<input
type="text"
class="form-control"
readonly
uib-datepicker-popup="dd MMMM yyyy"
ng-model="event.startsAt"
is-open="event.startOpen"
close-text="Close" >
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="vm.object.toggle($event, 'startOpen', event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<uib-timepicker
ng-model="event.startsAt"
hour-step="1"
minute-step="15"
show-meridian="true">
</uib-timepicker>
</td>
<td>
<p class="input-group" style="max-width: 250px">
<input
type="text"
class="form-control"
readonly
uib-datepicker-popup="dd MMMM yyyy"
ng-model="event.endsAt"
is-open="event.endOpen"
close-text="Close">
<span class="input-group-btn">
<button
type="button"
class="btn btn-default"
ng-click="vm.object.toggle($event, 'endOpen', event)">
<i class="glyphicon glyphicon-calendar"></i>
</button>
</span>
</p>
<uib-timepicker
ng-model="event.endsAt"
hour-step="1"
minute-step="15"
show-meridian="true">
</uib-timepicker>
</td>
</tbody>
</table>
</div>
<div class="modal-footer">
<button class="btn btn-primary" ng-click="$close()">OK</button>
</div>