Time Picker not working on bootstrap - angularjs

Question

I have following code and it's not working as expected. When I click on timer icon, nothing happens.
<ul class="dropdown-menu customScroll" role="menu" aria-labelledby="btn-append-to-body" ng-show="!myVm.showETA">
<li role="menuitem">
<a href="#">Start Time
<div class="input-group bootstrap-timepicker">
<input type="text" id="timepicker1" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
ng-model=myVm.startTime"
ng-change="myVm.getETACount('startTime');myVm.applyFilterForResultCount()"
/>
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</a>
</li>
<li role="menuitem">
<a href="#">End Time
<div class="input-group bootstrap-timepicker timepicker">
<input type="text" id="timepicker2" class="form-control input-small" placeholder="" aria-describedby="sizing-addon2"
ng-model="myVm.endTime"
ng-change="myVm.getETACount('endTime');myVm.applyFilterForResultCount()"
/>
<span class="input-group-addon"><i class="glyphicon glyphicon-time"></i></span>
</div>
</a>
</li>
<!--Clear div-->
<li role="menuitem" ng-click="myVm.clearTimePicker()">
<a href="#">
<p>
<span style="color:#40A8E2;">Clear</span>
<span style="color:#333333;"> – ETA</span>
</p>
</a>
</li>
<script type="text/javascript">
$('#timepicker1').timepicker();
$('#timepicker2').timepicker();
</script>
</ul>

Answer 1

Don't try to use the regular bootstrap.js file with angular unless you know how to write directives. When using angular if you need to do some DOM manipulation or extend the markup or behaviors (event handlers) for element you should use directives. For the timepicker you can just use the ui-bootstrap angular module https://angular-ui.github.io/bootstrap/#/timepicker you will need to include the regular bootstrap.css and ui-bootrap-tpls.js then include the ui-bootstrap module dependency and you can use the directive.