unable to call jquery datetimepicker function in custom directive

Question

I have made a custom directive in angularJs which is used to show datetimepicker.

app.directive("timePicker", function() {
            return {
                restrict: "A",
                link: function(scope, elem, attrs) {
                    //On click
                    $(elem).click(function() {
                        $(this).datetimepicker();
                    });
                }
            };
        });

used it like this in html

<div>
            <input type="text" name="basic_example_1" id="basic_example_1" value="" class="hasDatepicker" 
            time-picker>
        </div>

I am using following js files.

<script src='appResources/js/jquery-ui-sliderAccess.js'></script> 
<script src='appResources/js/jquery-ui-timepicker-addon.js'></script>
<script src='appResources/js/jquery-ui-timepicker-addon-i18n.min.js'></script>
<link href="appResources/css/jquery-ui-timepicker-addon.css" rel="stylesheet" />

I am referring from this site to get datetimepicker here

Answer 1

try to use only:

jquery-ui-timepicker-addon.js

and check console log, maybe there are errors