Wait for angular to finish updating the DOM

angularjs, callback, dom, javascript

Solution

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.

Problem

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.

Original source