JSFiddle - React, Tailwind, and code Playground

HTML

<body ng-app="testapp">
    <div timepicker="" ng-model="time1"></div>
    <div timepicker="" ng-model="time2"></div>
    <div timepicker="" ng-model="time3"></div>
    <div timepicker="" ng-model="time4"></div>
</body>

JavaScript

var app = angular.module("testapp", []);

app.directive("timepicker", function() {
    return {
        template: "<span>{{ timeDisplay }}</span><input type='time' ng-model='time'>test",
        scope: {
            time: "=ngModel"
        },
        controller: function($scope, $filter) {
            $scope.$watch('time', function(nv, ov) {
                var parts = nv.split(" ")[0].split(":");
                var hours = parts[0];
                var minutes = parts[1];
                $scope.timeDisplay = $filter('date')(new Date(2014, 03, 06, hours, minutes, 0), "H:mm");
            });
            
            $scope.time = "20:00";
        },
        
        link: function(scope, element, attr) {
            scope.displayElement = element.find("span");
            scope.inputElement = element.find("input");
            scope.inputElement.css({
                position: "absolute",
                "z-index": "-10000",
                opacity: 0
            });
            scope.displayElement.css({
                width: "200px",
                height: "20px",
                background: "blue",
                color: "white",
            });
            scope.displayElement.bind("click", function(event) {
                scope.inputElement[0].focus();
                scope.inputElement[0].click();
            });
        }
    };
});