Angular ui timepicker pop up not showing up - angularjs

Question

The following code not showing up pop up timepicker. Any idea how to fix?
Code:
<ul class="dropdown-menu custom-scroll dropDownLabel custom-width" role="menu" aria-labelledby="btn-append-to-body"
ng-show="!sr.timedisplay"
>
<li role="menuitem">
<a href="" ng-click="$event.stopPropagation()">Start Time
<p class="input-group">
<input type="text" class="form-control" timepicker-popup ng-model="sr.startTime" is-open="opened" timepicker-options="timeOptions" ng-required="true"/>
<span class="input-group-btn">
<button class="btn btn-default" ng-click="sr.getTime('startTime')"><i class="glyphicon glyphicon-time"></i></button>
</span>
</p>
</a>
</li></ul>

Answer 1

There is no such thing as a timepicker-popup, at least not in the official documentation - the question is tagged as angular-ui-bootstrap?
But you can create one by yourself using the timepicker and a dropdown :
<span uib-dropdown auto-close="outsideClick">
<a href uib-dropdown-toggle>
{{ displayTime }}
</a>
<ul class="uib-dropdown-menu">
<li>
<uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
</li>
</ul>
</span>
the script is basically the same as from the timepicker docs, besides a displayTime used for the dropdown :
$scope.$watch('mytime', function(newValue, oldValue) {
var hour = $scope.mytime.getHours()-($scope.mytime.getHours() >= 12 ? 12 : 0),
hour = hour<10 ? '0'+hour : hour,
minutes = ($scope.mytime.getMinutes()<10 ? '0' :'') + $scope.mytime.getMinutes(),
period = $scope.mytime.getHours() >= 12 ? 'PM' : 'AM';
$scope.displayTime = hour+':'+minutes+' '+period
})
plnkr -> http://plnkr.co/edit/J4alKogyKuevSGdTkLFQ?p=preview
NB: The plnkr is in 0.14.3. If you are using Angular UI Bootstrap prior to 0.14.0 then of course skip the uib- prefixes and it will work.
button style with glyph :
<span class="btn btn-default" uib-dropdown auto-close="outsideClick" >
<a href uib-dropdown-toggle>
{{ displayTime }} <i class="glyphicon glyphicon-time"></i>
</a>
<ul class="uib-dropdown-menu">
<li>
<uib-timepicker ng-model="mytime" hour-step="hstep" minute-step="mstep" show-meridian="ismeridian"></uib-timepicker>
</li>
</ul>
</span>
http://plnkr.co/edit/fyC6TfDsrJqsuGCqm11t?p=preview

Answer 2

This used to work:
<uib-timepicker></uib-timepicker>
Now you need to do this:
<div uib-timepicker></div>

Answer 3

based David's sample/input, here is a sample with input component in html, but no controller. And I tested it against Firefox and Chrome, it works well. BTW, I am using bootstrap v3.3.6 and Angular UI bootstrap v1.3.2.
<div class="row">
<div class="col-md-2" style="text-align: right">
<label>Time Picker Popup</label>
</div>
<div class="col-md-2">
<div class="input-group">
<input type="text" class="form-control">
<div class="input-group-btn" uib-dropdown auto-close="outsideClick">
<button type="button" class="btn btn-default dropdown-toggle" uib-dropdown-toggle><i class="glyphicon glyphicon-time"></i></button>
<ul class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
<li><uib-timepicker ng-model="mytime" hour-step="1" minute-step="15" show-meridian="false"></uib-timepicker>
</ul>
</div>
</div>
</div>
</div>