title: Evaluating Custom Directive after jQuery replaceWith
body: <p>I have the following code:</p>
  
  <pre><code>&lt;div ng-app="myApp" ng-controller="AngularCtrl"&gt;
    &lt;a href="#" id="click_btn"&gt;Click here&lt;/a&gt;
  &lt;/div&gt;
  &lt;script&gt;
   jQuery("#click_btn").click(function(){
    jQuery(this).replaceWith('&lt;p&gt;Hello {{student.name}}&lt;/p&gt;&lt;div my-repeater&gt;&lt;/div&gt;');
   });
  &lt;/script&gt;​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
  </code></pre>
  
  <p>Here is my angular code:</p>
  
  <pre><code>var myApp = angular.module('myApp',[]);
  
  myApp.directive('myRepeater', function() {
   return {
      restrict: 'A',        
      link: function(scope, element, attrs) {
          var myTemplate = "&lt;div&gt;{{rating}}&lt;/div&gt;";
          for(var i=0;i&lt;scope.items.length;i++)
          {
              var myItem = scope.items[i];                    
              var text = myTemplate.replace("{{rating}}",myItem.rating);
              element.append(text);
          }
      }
   };
  }); 
  
  function AngularCtrl($scope) {
    $scope.student = {id: 1, name: 'John'};
    $scope.items = [{id: 1, ratings: 10}, {id: 2, ratings: 20}];
  } 
  </code></pre>
  
  <p>Here, whenever i click on the button, the element is just getting replaced and not evaluated. I tried with "angular.bootstrap(document);" after document is ready.</p>
  
  <p>But that just evaluates the angular objects. But still the custom directive "my-repeater" is not getting evaluated. Any help on how can i get this done?</p>