angularjs - angular $compile not working when adding a new directive -

    (function(){          angular             .module('main')             .directive('search', search);          search.$inject = ['$compile'];          function search($compile){              return {                 link: function(scope, ele, attrs){                     ele.bind('click', function(){                         var template = "<search-results>{{searchctrl.results.length}}</search-results>";                         $compile(template)(scope);                         $('.resultscontainer').append(template);                     });                 }             }          }      })(); 

<search-results></search-results> directive, below:

(function(){      angular         .module('main')         .directive('searchresults', searchresults);      searchresults.$inject = [];      function searchresults(){          return {             templateurl: 'main/views/resultscontainer.client.view.html',             link: function(scope, ele, attrs){                 ele.bind('click', function(){                  });             }         }      }  })(); 

the directive trying add @ beginning () did not compiled , got

<search-results>{{searchctrl.results.length}}</search-results> 

as output. scope values not inject it. new directive added has template pulled, done. saw request template in console.

can find mistake

you need results returned $compile appended

try changing:

 $compile(template)(scope); 

to

template = $compile(template)(scope);