ion-tabs run function after selection

I have a ionic app with a tabbed interface that has a code-editor on one tab and a preview area on another tab (that uses the user's code). There are two things I want to accomplish, both which run into the same problem:

<ion-tabs>
    <ion-tab title="Code" on-select="ace.edit('editor')">
         <ion-content>
             <div id="editor"></div>
         <ion-content>
    </ion-tab>
    <ion-tab title="Preview" on-select="compileAndPreviewCode()">
         <ion-content>
             <canvas id="previewCanvas"></canvas>
         <ion-content>
    </ion-tab>
</ion-tabs>

1) Once the code-edit tab is selected, and AFTER the contents of the tab have been injected to the DOM, I want to run a function that will activate my code editor.

  • If I register the function with the on-selected callback, it will get called before the #codeEditor div has been created.
  • If I call the function inside a script tag inside the tab content area (that gets created alongside the #editor div) then the script doesn't get executed (see See this problem.
  • If I include JQuery in my application in an attempt to get such scripts to auto-execute, the ionTabs controller breaks.
  • If I try to call the function using a onload event on the editor div, it isn't executed.

2) The same problem applies when the preview tab is selected. I want to compile and inject the code onto the canvas element, but I cannot do this before the canvas element is created.

So, does anyone know how I could call a function after the DOM within an ion-tab's ion-content is created?