bootstrap timepicker with angularjs

Question

I need to use Bootstrap TimePicker with AngularJS. I am new to AngularJS.

I have edit option for end date. on edit timepicker is shown but not working in AngularJS.

HTML:

    <div class="col-md-3">
        <label>End Time</label> 
         <span ng-hide="editingViewActivityForm">{{actDetailsData.endTime | date: 'shortTime'}}</span>      
           <div ng-show="editingViewActivityForm" class="input-group bootstrap-timepicker timepicker">
                <input id="timepicker1" ng-model="actDetailsData.endTime" type="text" class="form-control input-small">

<span class="input-group-addon" ng-click="openTime()">
<i class="glyphicon glyphicon-time"></i></span>
            </div>
         </div>

Controller:

angular.element(document).ready(function () {
        angular.element('#timepicker1').timepicker();
      });

Answer 1

you can use ui-bootstrap instead of bootstrap.

at first download ui bootstrap then add ui bootstrap script and css link to your project .then add ui.bootstrap to your module

angular.module('myModule', ['ui.bootstrap']);

and at the end add datepicker like this :

 <input type="text" class="form-control" uib-datepicker-popup="{{format}}" 
 ng-model="dt" is-open="popup1.opened" min-date="minDate" max-date="maxDate"
 datepicker-options="dateOptions" date-disabled="disabled(date, mode)"
 ng-required="true" close-text="Close" alt-input-formats="altInputFormats" />

ui bootstrap datepicker in github