Wait for angular to finish updating the DOM

Question

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 completes?

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.

Answer 1

Use $timeout:

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

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