Evaluating Custom Directive after jQuery replaceWith - angularjs

Question

I have the following code:
<div ng-app="myApp" ng-controller="AngularCtrl">
Click here
</div>
<script>
jQuery("#click_btn").click(function(){
jQuery(this).replaceWith('<p>Hello {{student.name}}</p><div my-repeater></div>');
});
</script>​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​​
Here is my angular code:
var myApp = angular.module('myApp',[]);
myApp.directive('myRepeater', function() {
return {
restrict: 'A',
link: function(scope, element, attrs) {
var myTemplate = "<div>{{rating}}</div>";
for(var i=0;i<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}];
}
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.
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?

Answer 1

First of all, I suppose this is test code, since angular has ng-repeat, which fits your needs.
There are several issues with your code:
1) You shouldn't use myTemplate.replace, but use the $compile service. Inject the $compile service into your directive (add as function param) and use it:
var text = $compile(myTemplate)(scope);
2) Items on the controller will not by accessible in your directive. Add it as a value to your my-repeater attribute:
<div my-repeater='{{items}}'>
In your directive you need to evaluate my-repeater:
var items = scope.$eval(attrs.myRepeater);
3) jQuery(this).replaceWith will not kickoff angular, since it it out of its scope. You need to do it manually by using scope.$apply. But is better to add the click event in the directive link function:
link: function(scope, element, attrs) {
element.on('click', function() {
...
scope.$apply();
});
Edit: Here is a working example.