timePicker.js

app.directive('timePicker', function(){
    return {
        restrict: 'A',
        replace: true,
        scope: {
            time: '='
        },
        templateUrl: 'js/partials/time-picker.html',
        link: function(scope, el, attr){
            
            var hideDropDown = function() {
                scope.showTimeDropdown = false;
                scope.$apply();
            };
            
            el.bind('click', function(e){
                if (e.target.nodeName === 'INPUT'){
                    scope.showTimeDropdown = true;
                    scope.$apply();
                } else if (e.target.nodeName === 'LI'){
                    var time = angular.element(e.target).html();
                    scope.time = time;
                    hideDropDown();
                }
            });
            
            el.bind('mouseleave', function(){
                hideDropDown();
            });
            
        }
    }
}); //end of timepicker directive