How to add function into $mdDialog.show AngularJS Material

Question

I use angularJS material dialogs for creating pop up window where I want to input how long some task took to finish. I want to use bootstrap-datepicker and I have to assign function to my input,

angular.element(".timepicker").timepicker({
    showInputs: false
});` 

but problem is when this function is hit, that element does not exist.

Here is my controller function:

$scope.showCompleteConfirm = function (ev) {
        //Timepicker
        angular.element(".timepicker").timepicker({
            showInputs: false
        });
        $mdDialog.show({
            controller: UserDetailController,
            templateUrl: 'app/components/templates/CustomTimeDialog.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: false // Only for -xs, -sm breakpoints.
        })
        .then(function (answer) {
            //success
        }, function () {
            //fail
        });
    };

What I can do and its working is to create tags in my HTML page and assign it from there since when this template will be called, my input will exist, but I would like to know if there is a way how to make it work with my function in controller only.

Answer 1

I'm not entirely sure, but I think $mdDialog has an onComplete lifecycle hook that you can use. It gets fired after show() is done running.

$mdDialog.show({
            controller: UserDetailController,
            templateUrl: 'app/components/templates/CustomTimeDialog.html',
            parent: angular.element(document.body),
            targetEvent: ev,
            clickOutsideToClose: true,
            fullscreen: false // Only for -xs, -sm breakpoints.
            onComplete: function (){
                     angular.element(".timepicker").timepicker({
                     showInputs: false
              });
            }
            })