title: Correct way to insert elements with angular directive using angular.element()
body: <p>What is the correct way to insert element into the DOM using angular.element() ?</p>
  
  <pre><code>app.directive('validationTest', function(){
              return {
                  restrict: 'A',
                  replace: false,                 
                  link: function(scope, element, attrs){
                      scope.call = function(){
                          console.log('Someone clicked it');
                      };
  
                      var newElement = angular.element('&lt;span ng-click="call()"&gt;').text('Yo Yo');
                      element.append(newElement);
                  }
              };
          });
  </code></pre>
  
  <p>In this code, I am trying to add a span element within the element on which directive has been applied. I am able to add this span element as the child of the parent div on which append mehtod is called.</p>
  
  <p>However, as you can see in the code, a <code>ng-click</code> also has been associated with this span. I know it is not useful from any point of view, it is just for demo purpose. So, normally, clicking on this span, a line should be printed in the console. However, it doesn't happen. </p>
  
  <p>What am I missing here ? Have I used wrong approach for this append or there is some error in my code ?</p>