title: Angularjs - dynamically add and update DOM
body: <p>I am trying add HTML elements through javascript that has a directive:</p>
  
  <pre><code>document.getElementsByClassName("day-grid")[0].innerHTML = "&lt;div ng-uc-day-event&gt;&lt;/div&gt;";
  or
  var ele = document.createElement("div");
  ele.setAttribute("ng-uc-day-event","");
  document.getElementsByClassName("day-grid")[0].appendChild(ele);
  </code></pre>
  
  <p>Both results in adding the <code>div</code> to <code>.day-grid</code>. I am using a directive to load template from an external file into <code>ng-uc-day-event</code>. It works as expected when it is run from the HTML file, but it doesn't work when I run the above code from the developer console.</p>
  
  <p>How do I make angularjs to call the directive or evaluate the element when I am adding the element to DOM, so that the template is loaded into <code>div</code> when it is inserted into <code>.day-grid</code>?</p>
  
  <p>Below is the directive I am using:</p>
  
  <pre><code>ulcal.directive("ngUcDayEvent", function ($timeout) {
    return {
      restrict: 'A',
      templateUrl: 'views/dayevent.html',
      link: function (s, e, a) {
        $timeout(function () {
          s.$emit("ucDayEventLoaded");
        })
      }
    }
  });
  </code></pre>