AngularJs with Jquery-ui Datepicker creates multiple DOM elements for and editable table

I have a jquery-ui datepicker in a directive that gets included in an editable table column. Everything works great but the problem is I have 3 date columns and up to 100 rows of data. This results is 300 xdsoft elements being written to the bottom of the DOM which takes a long time to load. Is there anyway to build the jquery ui datepicker on demand (on focus) instead of pre-loading all 300 instances?

<input type="text" ng-model="train.estPull" jqdatetimepicker="{allowTimes:['00:00','03:00','06:00','09:00','12:00','15:00','18:00','21:00']}" style="width: 90px" ng-required="true" name="ETA" ng-model-options="{updateOn: 'blur'}" date-time="{format: 'MM/DD/YYYY HH:mm'}">

Directive:

angular.module('directives').directive('jqdatetimepicker', [function() {
return {
    restrict: 'A',
    link: function (scope, element, attrs, ctrl) {

        var defs = {
            format: 'm/d/Y H:i',
            hours12: false,
            step: 15,
            validateOnBlur: true,
            allowBlank: true
        };
        var opts = scope.$eval(attrs.jqdatetimepicker);

        if (opts) {
            $.extend(defs, opts);
        }

        element.datetimepicker(defs);

        if (opts && opts.autoShow) {
            element.datetimepicker("show");             
        }

        scope.$on("$destroy", function () {
            element.datetimepicker('destroy'); // Immediately destroy jqdatetimepicker
        });
    }
};

}]);

Results in:

enter image description here

Source: AngularJS