angularjs - Why does not work inserting HTML in Angular JS? -

i have html code:

<div dynamic="html"></div> 

and angular js in ajax response:

$scope.html = content; 

my dirrective dynamic looks as:

.directive('dynamic', function ($compile) {             return {                 restrict: 'a',                 replace: true,                 link: function (scope, ele, attrs) {                     scope.$watch(attrs.dynamic, function(html) {                         ele.html(html);                         $compile(ele.contents())(scope);                     });                 }             };         }) 

so, when have $scope.html html code in response dynamic not insert(prepend) code in div block. why?

...and angular js in ajax response:

i cannot see ajax call being made template.

so, when have $scope.html html code in response dynamic not insert(prepend) code in div block. why?

you not seeing content because html, callback response in $watch undefined

from understanding, presume want have directive attribute value supplied html file make ajax request to.

<div dynamic="file.html"></div> 

further, in link:{ ... } function of attribute, can make ajax call supplied template path, html response data , insert/append div block containing directive.

 link: function (scope, ele, attrs) {    $http.get('file.html').then(function(content){      ele.html(content.data);      $compile(ele.contents())(scope);    })  }         

here's demo