Question:

I am using the following code. To target the particular element and append a <div>inside that but getting uncaught typeerror: undefined is not a function for $compile(newDirective)($scope);

$scope.grid= function (targetElement) { console.log("target element",targetElement) var newDirective = angular.element("<div style='height:200px' > Sample code </div>"); targetElement.append(newDirective); $compile(newDirective)($scope); }

Try this code.

$scope.grid= function (targetElement) { var $div = $("<div style='height:200px' > Sample code </div>"); $(targetElement).append($div); angular.element(targetElement).injector().invoke(function($compile) { var scope = angular.element($div).scope(); $compile($div)(scope); }); }