title: angular compiled html in different languages doesn't call function on scope
body: <p>I have the following scenario:</p>
  
  <p>html:</p>
  
  <pre><code>&lt;span ng-if="model.thresholdText" compile="model.thresholdText"&gt;&lt;/span&gt;
  </code></pre>
  
  <p>compile directive:</p>
  
  <pre><code>.directive('compile', ['$compile', function($compile) {
  return function(scope, element, attrs) {
      scope.$watch(
          function(scope) {
              return scope.$eval(attrs.compile);
          },
          function(value) {
              element.html(value);
              $compile(element.contents())(scope);
          }
      );
  };
  </code></pre>
  
  <p><code>model.theresholdText</code> contain text sometimes in english and sometimes in japanese/spanish/russian includeing some html. Its always in the format of:</p>
  
  <pre><code>some text in origin language 
  &lt;a href="" onclick="myFunc()"&gt;Origin language text&lt;/a&gt;
  Some more text in origin language
  </code></pre>
  
  <p>I encounter the following problem: When the origin language is in English, everything works perfectly and <code>myFunc</code> gets called. However, when the text is in japanese for example, I get an error in console:</p>
  
  <blockquote>
    <p><code>Uncaught ReferenceError: myFunc is not defined</code></p>
  </blockquote>