title: $compile not working inside callback
body: <p>I have an AngularJS directive which calls $compile inside a callback click() function. However, the contents do not seem to be getting compiled.</p>
  
  <pre><code>var testApp = angular.module('testApp', []);
  
  testApp.controller('TestController', function($scope) {
    $scope.user_name = 'George';
  });    
  
  testApp.directive('testDirective', function($compile) {
    return {
      template: 'Click Here',
      link: function(scope, element, attrs) {
  
        $(element).click(function() {
          $('#externalDiv2').html('{{user_name}}, you clicked the button.');
          $compile($('#externalDiv2')[0])(scope);
        });
      }
    };
  });
  </code></pre>
  
  <p>In the example above, #externalDiv2 still displays '{{user_name}}' instead of interpolating it with the username from the scope object.</p>
  
  <p>What am I doing wrong?</p>
  
  <p><a href="http://jsfiddle.net/gcmLndzm/3/" rel="nofollow">http://jsfiddle.net/gcmLndzm/3/</a></p>