I need to attach bootstrap datepicker to one of my input fields that will be generated with AngularJS.

Doing the following doesn't work because the element does not yet exist:

$(function () {
    $(':input[name=dispense_date]').datepicker();
});

Instead I must do:

$(function () {
    setInterval(function () {
        $(':input[name=dispense_date]').datepicker();
    }, 200);
});

The latter version works but is inefficient and not exactly the "correct" way to do this. Do angular controllers/modules have a method for running callbacks after everything pletes?

I need the jquery code to run after an $http.get() call, but simply adding it inside the .success() call won't do the trick since $apply hasn't ran yet.

I need to attach bootstrap datepicker to one of my input fields that will be generated with AngularJS.

Doing the following doesn't work because the element does not yet exist:

$(function () {
    $(':input[name=dispense_date]').datepicker();
});

Instead I must do:

$(function () {
    setInterval(function () {
        $(':input[name=dispense_date]').datepicker();
    }, 200);
});

The latter version works but is inefficient and not exactly the "correct" way to do this. Do angular controllers/modules have a method for running callbacks after everything pletes?

I need the jquery code to run after an $http.get() call, but simply adding it inside the .success() call won't do the trick since $apply hasn't ran yet.

• javascript
• angularjs
• dom
• callback

• 3 don't re-invent the wheel. angular-ui.github.io/bootstrap – charlietfl Commented Jul 16, 2014 at 23:09
• 1 True, but I didn't like the look of their datepicker. – TheOne Commented Jul 17, 2014 at 22:30

1 Answer 1

Use $timeout:

$timeout(function() {
    $(':input[name=dispense_date]').datepicker();
});

Angular will ensure that the timeout function executes after the pile/link phase and even after the render phase.