Compiling async content (or hey, my directive isn't working)

The front-end of this site is was previously an AngularJs app, for no other reason than I wanted to build an AngularJs app.

UPDATE: Moving this site to Jekyll threw up a similar issue, where CodePen embeds weren’t parsed in the markdown files. Removing the async attribute from the embedded script tag solves this.

Which is great. I have a RESTful API serving up my content (from an Umbraco instance hosted on Azure’s free tier), which I can then template and route and manipulate to my little heart’s content.

Until I wanted a CodePen embed.

The problem there being that while I can easily add the required Javascript to my template, and send the markup down via the API, the content arrives after - only slightly, but still after - the Javascript has been parsed.

The solution was pretty straightforward - I watch for changes in the object containing the CodePen markup. In the watch, I set a brief timeout, an when that expires, I can traverse the DOM to find the CodePen embed, and recompile it: