angularjs-compile

I have a composite list directive - that is - a list item that can be a list himself. The parent directive defines the controller: .directive('parent', function() { controller: function($scope) { }, link: function (scope, element, attrs) { } }) The list (of items) requires the parent controller which by itself works fine (why shouldn't it..): .directive('list', function() { require: '^parent', link: function (scope, element, attrs, parentCtrl) { } }) The same goes as well for the concrete item, which is also fine: .directive('item', function() { require: '^parent', link: function (scope,

I am really confused with $compile in angularjs. can anyone help me, What use of $compile in angularjs with an example other then in this documentation. https://docs.angularjs.org/api/ng/service/$compile $compile just compile the text to html.. Here is sample example angular .module("myModule", []) .controller("myController", ['$scope', '$compile', function ($scope, $compile) { $scope.txt = "<b>SampleTxt</b>"; $scope.submit = function () { var html = $compile($scope.txt)($scope); angular.element(document.getElementById("display")).append(html); } }]); <script src="https://ajax.googleapis.com

I have compiled an element using the $compile service. If I add that directly to the DOM, it looks great and all of the bindings are correct. If I want that element as a string though, it shows {{stuffHere}} instead of the bindings. Is there a way to get the html of the element after it's compiled? $templateCache.put('template', '<div><div><div><span>content is {{content}}</span></div></div> </div>'); $scope.content = 'Hello, World!'; var el = $compile($templateCache.get('template'))($scope); $('body').append(el); alert(el.html()); http://plnkr.co/edit/1sxvuyUZKbse862PieBa?p=preview The