title: Accessing elements added to DOM with ng-bind-html
body: <p>This probably has been answered before but I have tried for 48 hours now to find an answer with now luck. Posting this is a last resort. </p>
  
  <p>So I have this Tetris clone and it works as seen here: <a href="http://www.crawfordcomputing.com/portfolio/Jetris.php" rel="nofollow noreferrer">http://www.crawfordcomputing.com/portfolio/Jetris.php</a></p>
  
  <p>But it does not work in this single page angular app:</p>
  
  <p><a href="http://www.crawfordcomputing.com/AkadineWebOS/" rel="nofollow noreferrer">http://www.crawfordcomputing.com/AkadineWebOS/</a></p>
  
  <p>I am re-coding the whole site to be a AngularJS single page app. To this end, I load the html via ng-bind-html and the compile directive found here:  <a href="https://stackoverflow.com/questions/26594153/angularjs-directive-in-ng-bind-html">AngularJS directive in ng-bind-html</a>.</p>
  
  <p>The html string I am binding is exactly: EDIT: tried making canvas a childnode, did not work.<code>&lt;div&gt;&lt;canvas id='gamewindow' width='780px' height='560px'&gt;&lt;/canvas&gt;&lt;/div&gt;</code> </p>
  
  <p>The necessary scripts are loaded via the function found here: <a href="https://stackoverflow.com/questions/15939913/single-page-application-load-js-file-dynamically-based-on-partial-view">Single page application - load js file dynamically based on partial view</a></p>
  
  <p>Note: html5jetris.js is actually an object:  <code>var jetris = { startgame: function(), ...};</code></p>
  
  <p>Using firebug, I can see all added elements and the scripts in the DOM. I also am assuming that being a single page already loaded that I cannot use <code>window.onload = jetris.startGame;</code> after the closing ";" of <code>var jetris = {};</code></p>
  
  <p>1) I tried putting an <code>alert("hello");</code> as second to last line (just before the call to startGame) and tried stepping through with firebug. It appears that html5jetris.js, while loaded, is not running.</p>
  
  <p>2) I tried to access the canvas by id directly from address bar with <code>javascript:getElementByID("gamewindow").innerHTML = "hello";</code> 
  no success; this was several seconds after the ng-bind-html executed well past the 1-1.5 seconds it takes angular to load it.</p>
  
  <p>3) if I pre-emptivly load all the js in my index.php, then firefox will step through it. But I only want to load the javascript when needed. This does not fix not being able to access the canvas by id.</p>
  
  <p>4) by it self, Jetris works, just not loaded dynamically by AngularJS.</p>
  
  <p>Note: Jetris does not require jQuery, even though it's there for Angular. It depends on my own utitlty.js (made as part of a javascript class, converted to object: <code>var U = {};</code>) and my own html5canvas.js (again, <code>var canvas = {};</code>) Since these are objects, the variables in them should not bump heads with anything jQuery or Angular. </p>
  
  <p>Any ideas?</p>
  
  <p>here is the directive: </p>
  
  <pre><code>.directive('compile', ['$compile', function ($compile) {
  return function(scope, element, attrs) { //taken from Joël (Thank you!) source: https://stackoverflow.com/questions/26594153/angularjs-directive-in-ng-bind-html
      scope.$watch(
          function(scope) {
              // watch the 'compile' expression for changes
              return scope.$eval(attrs.compile);
          },
          function(value) {
              // when the 'compile' expression changes
              // assign it into the current DOM
              element.html(value);
  
              // compile the new DOM and link it to the current
              // scope.
              // NOTE: we only compile .childNodes so that
              // we don't get into infinite loop compiling ourselves
              $compile(element.contents())(scope);
          }
      );
  };
  </code></pre>
  
  <p>}])</p>
  
  <p>Jetris.php:</p>
  
  <pre><code>    &lt;?php //Jon Crawford AkadineWebOS pages/jetris.php 
  
  //describe window
  $window = array();
  $window['content'] = "&lt;canvas id='gamewindow' width='780px' height='560px'&gt;&lt;/canvas&gt;";
  $window['title'] = "Jetris";
  $window['x'] = 20;
  $window['y'] = 250;
  $window['id'] = 900;
  $window['requireJS'] = array();
  $window['requireJS'][0] = "scripts/html5Jetris.js";
  $window['requireJS'][1] = "scripts/html5Canvas.js";
  $window['requireJS'][2] = "scripts/utilities.js";
  
  echo json_encode($window);
  ?&gt;
  </code></pre>
  
  <p>This gets loaded to a div with title bar and exit button that is draggable. My menu system is icon like. My AkadineWebOS looks like a regular desktop. I have an about.php and a welcome.php that work just fine in my div-windows.</p>