title: "Unable to add dynamic content" using AngularJS for Windows Store App, yet it works
body: <p>I'm creating an Windows Store App (or metro app, or whatever they call it) using AngularJS.</p>
  
  <p>I solved to Javascript RunTime Error "Unable to add dynamic content" which crashed the application (see <a href="http://onehungrymind.com/windows-8-and-angularjs/" rel="nofollow">here</a>) and everything went fine until I beginning to use directive (undestand angular.module.directive).</p>
  
  <p>Now, I have a "Unable to add dynamic content" but in the console log. Note that the app do not crash, in fact, the app works as expected!</p>
  
  <p>Should I just ignore the error (I don't like that), can I do anything about it ?</p>
  
  <p>A code of a "clock" app to illustrate: 
  The app did display the correct time, formatted and incremented each second. The DOM is what I expect.</p>
  
  <p>Thanks,</p>
  
  <p>index.html:</p>
  
  <pre><code>&lt;!doctype html&gt;
  &lt;html lang="en" ng-app="phonecat"&gt;
  &lt;head&gt;
  &lt;meta charset="utf-8"&gt;
  &lt;title&gt;Google Phone Gallery&lt;/title&gt;
  &lt;link rel="stylesheet" href="css/app.css"&gt;
  &lt;link rel="stylesheet" href="css/bootstrap.css"&gt;
  
  &lt;script src="lib/jquery-1.8.2-win8-1.0.min.js"&gt;&lt;/script&gt;
  &lt;script type="text/javascript"&gt;
      jQuery.isUnsafe = true;
  &lt;/script&gt;
  &lt;script src="lib/angular/angular.js"&gt;&lt;/script&gt;
  &lt;script src="js/app.js"&gt;&lt;/script&gt;
  &lt;script src="js/controllers.js"&gt;&lt;/script&gt;
  &lt;script src="js/filters.js"&gt;&lt;/script&gt;
  &lt;script src="js/services.js"&gt;&lt;/script&gt;
  &lt;script src="lib/angular/angular-resource.js"&gt;&lt;/script&gt;
  &lt;/head&gt;
  </code></pre>
  
  <p></p>
  
  <p></p>
  
  <p>
  </p>
  
  <p>app.js</p>
  
  <pre><code>angular.module('phonecat', ['phonecatFilters', 'phonecatServices']).config(['$routeProvider', function($routeProvider) {
    $routeProvider.
        when('/phones', {templateUrl: 'partials/phone-list.html',controller: PhoneListCtrl}).
        otherwise({redirectTo: '/phones'});
    }])
  .directive('myCurrentTime', function($timeout, dateFilter) {
      return {
          restrict: 'E',
          replace: true,
          template: '&lt;div&gt; Current time is: &lt;span&gt;{{time}}&lt;/span&gt;&lt;/div&gt;',
          link: function (scope, element, attrs) {
              var timeoutId;
  
              function updateTime() {
                 scope.time = dateFilter(new Date(), 'M/d/yy h:mm:ss a');
              }
  
              function updateLater() {
                  timeoutId = $timeout(function () {
                      updateTime();
                      updateLater();
                  }, 1000);
              }
  
              element.bind('$destroy', function () {
                  $timeout.cancel(timeoutId);
              });
  
              updateLater();
          }
      }
  });
  </code></pre>
  
  <p>error:</p>
  
  <pre><code>HTML1701: Unable to add dynamic content '&lt;my-current-time&gt;&lt;/my-current-time&gt;
  '. A script attempted to inject dynamic content or elements previously modified dynamically that might be unsafe. For example, using the innerHTML property to add script or malformed HTML will generate this exception. Use the toStaticHTML method to filter dynamic content or explicitly create elements and attributes with a method such as createElement. For more information, see http://go.microsoft.com/fwlink/?LinkID=247104.
  File: index.html
  </code></pre>