title: Calling an angular directive via append method
body: <p>I'm trying to call an angular directive with html text I am appending in my controller like so, </p>
  
  <pre><code>var loadReviews=function(){
  var theDiv=$("#rlist")
     for(var i=0; i&lt;vm.reviewlistByUpvote.length; i++){
         var review=vm.reviewlistByUpvote[i];
         var html='&lt;a star-directive ng-model="review.overall" data-size="xs" data-disabled="true"&gt; &lt;/a&gt;';
         theDiv.append(html)
   };
  };
  </code></pre>
  
  <p>And my directive looks as follows, </p>
  
  <pre><code>angular.module('App')
  .directive('starDirective', function() {
  return {
    restrict: 'A',
    // templateUrl: 'views/star.html',
    link: function(scope, element, attrs, ngModel) {
          $(element).rating(scope.$eval(attrs.starRating));
  
                // get value from ng-model
          ngModel.$render = function() {
              $(element).rating('update', ngModel.$viewValue || '');
          }
  
  
  
            $(element).on('rating.change', function(event, value, caption) {
              ngModel.$setViewValue(value);
          });
           }
  
  
     };
   });
  </code></pre>
  
  <p>However, the directive won't compile. If I load the star directive within my html, it works fine, but through this approach, nothing gets loaded. I've looked into $compile but it did not fix the issue, but I may have applied it incorrectly.</p>