Popup Timepicker Using AngularJS and Bootstrap

AngularUI for AngularJS has implemented some Booststrap components in native AngularJS, such as date picker, time picker and etc. It's interesting to see there is a popup option for the date picker while time picker does not have a popup option.

Therefore, it inspired me to create a popup time picker using AngularJS. I have to say it is a challenging task for an AngularJS new comer like me. However, it is also a quick and fun way to learn AngularJS.

The following screenshot is what I have achieved. Here is a live demo for the popup time picker
 


The implemented popup time picker depends on the AngularUI for bootstrap. So if you use this timepicker, make sure you add these javascript references in the HTML files, something like this following:

<link rel="stylesheet"
  href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">

<script
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular.js"></script>
<script
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-resource.js"></script>
<script
  src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.13/angular-route.js"></script>
<script
  src="http://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/0.10.0/ui-bootstrap-tpls.js"></script>

The following is a very simple code snippet showing how to use the popup time picker.

  <script type="text/javascript">
    angular.module('timepickerDemo', [ 'timepickerPop' ]).controller(
        'DemoCtrl', function($scope) {
          $scope.time1 = new Date();
          $scope.showMeridian = true;
  
        });
  </script>

  <div class="container" ng-app="timepickerDemo" ng-controller='DemoCtrl'>
    <div class='col-md-6 col-md-offset-3'>
      <h1>Popup Timepicker Demo</h1>
      <timepicker-pop input-time="time1" class="input-group"
        show-meridian='showMeridian'> 
      </timepicker-pop>
    </div>
  </div>

Both the javascript source code and the demo code are available at github via the following link:
https://github.com/mytechtip/timepickerpop

If you think the function of the time picker is limited, you are welcome to improve it. :)