<!doctype html>
<html ng-app="plunker">
<head>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.0-beta.1/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0-beta.1/angular-animate.js"></script>
<link href="//netdna.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet">
<script src="script.js"></script>
<script src="//angular-ui.github.io/bootstrap/ui-bootstrap-tpls-2.5.0.js"></script>
</head>
<body>
<div ng-controller="uiDemoCtrl">
<br><br><br>
<label>Selected time is: <em>{{mytime | date:'shortTime' }}</em></label>
<br>
<span uib-dropdown auto-close="outsideClick">
<input type="text" uib-dropdown-toggle ng-model="mytime"/>
<ul class="uib-dropdown-menu">
<li>
<div uib-timepicker ng-model="mytime" hour-step="1"
minute-step="1" show-seconds="true"
show-meridian="ismeridian"></div>
</li>
</ul>
</span>
</div>
</body>
</html>
angular.module('plunker', ['ui.bootstrap','ngAnimate'])
.controller("uiDemoCtrl",["$scope", function ($scope) {
$scope.mytime = new Date("2017-03-01 09:00:00");
$scope.ismeridian = true;
$scope.toggleMode = function() {
$scope.ismeridian = ! $scope.ismeridian;
};
}]);
/* Styles go here */