Dynamically how to add directives? - angularjs

Question

I am trying to create dynamic directives. but i am getting error. any one correct me please?
here is my code :
var data = [{completed:40}, {completed:20}, {completed:55}, {completed:69}, {completed:71}]
var newApp = angular.module('myApp', []);
newApp
.controller('home', ['$scope', function ($scope, $compile) {
$scope.data = data;
for(var i=0; i < $scope.data.length; i++) {
$('.content').append($compile("<title></title>")(scope));
$scope.$apply();
}
}]);
newApp
.directive('title', function ($compile, $http) {
return {
restrict:'E',
replace : true,
template : '<h2 class="que t3">QQQ</h2>',
link : function () {
console.log('link called');
}
}
});
Live Demo

Answer 1

Just missing a few things: http://jsfiddle.net/8vyduzam/2/
var data = [{completed:40}, {completed:20}, {completed:55}, {completed:69}, {completed:71}]
var newApp = angular.module('myApp', []);
newApp
.controller('home', ['$scope', '$compile', function ($scope, $compile) {
$scope.data = data;
for(var i=0; i < $scope.data.length; i++) {
$('.content').append($compile("<title></title>")($scope));
}
}]);
newApp
.directive('title', function ($compile, $http) {
return {
restrict:'E',
replace : true,
template : '<h2 class="que t3">QQQ</h2>',
link : function () {
console.log('link called');
}
}
});
There were three things
In the function, the second parameter accepts an array that lists all the services to inject into the last element of the array, the controller function. So you needed to add '$compile' so that it gets passed in.
You were also using scope when actually compiling the title directive instead of $scope.
During the controller function, it's already in a $digest loop, so you can also remove the extra $apply().