title: Initializing an Angular Directive in JavaScript
body: <p>I have a directive in my template. It's working great:</p>
  
  <pre><code>&lt;ul class="activity-stream"&gt;
      &lt;my-activity-stream-item ng-repeat="activity in vm.activities" activity="activity"&gt;&lt;/my-activity-stream-item&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>I'd basically like to include the same HTML in that template as a popup in a Leaflet Map, but I have no idea how to create that in code. Here's what I tried:</p>
  
  <pre><code>for (i = 0; i &lt; activities.length; i++) {
    var activity = activities[i];
    var marker = L.marker([activity.location.lat, activity.location.lng]);
    marker.type = activity.type;
    marker.bindPopup( '&lt;my-activity-stream-item activity="activity"&gt;&lt;/my-activity-stream-item&gt;' );
    marker.addTo( map );
  }
  </code></pre>
  
  <p>I didn't really expect that to work, I feel like I have to pass the scope in somehow... but I'm at a complete loss as to how to do it.</p>
  
  <pre><code>var app = angular.module('myPortal');
  
  app.factory('TemplateService', TemplateService);
  app.directive('myActivityStreamItem', myActivityStreamItem);
  
  function myActivityStreamItem( $compile, TemplateService ) {
    return {
        restrict: 'E',
        link: linker,
        transclude: true,
        scope: {
            activity: '='
        }
    };
  
    function linker(scope, element, attrs) {
      scope.rootDirectory = 'images/';
  
      TemplateService.getTemplate( 'activity-' + scope.activity.type ).then(function(response) {
        element.html( response.data );
        $compile(element.contents())(scope);
      });
    }
  }
  
  function TemplateService( $http ) {
    return {
      getTemplate: getTemplate
    };
  
    function getTemplate( templateName ) {
      return $http.get('/templates/' + templateName + '.html');
    }
  }
  </code></pre>
  
  <p>(Note - I've only been using Angular for about a week, so please let me know if you think I've done this completely wrong)</p>
  
  <p><strong>EDIT:</strong> I took Chandermani's advice and switched my directive to an <code>ngInclude</code>:</p>
  
  <pre><code>&lt;ul class="activity-stream"&gt;
      &lt;li ng-repeat="activity in vm.activities" ng-include="'/templates/activity-' + activity.type + '.html'"&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>This works great! I also tried to use Josh's advice to compile the HTML in JavaScript, however I'm not quite there...</p>
  
  <pre><code>var link = $compile('&lt;li ng-include="\'/templates/activity-' + activity.type + '.html\'"&gt;&lt;/li&gt;');
  var newScope = $rootScope.$new();
  newScope.activity = activity;
  var html = link( newScope );
  marker.bindPopup( html[0] );
  </code></pre>
  
  <p>This results in the popup appearing, but the HTML contained within the popup is a comment: <code>&lt;!-- ngInclude: '/templates/activity-incident.html' --&gt;</code></p>
  
  <p>Do I have to pass it the activity in the <code>li</code> somehow?</p>
  
  <p><strong>Edit 2:</strong> Got it! As noted in <a href="https://github.com/angular/angular.js/issues/4505" rel="nofollow">Issue #4505</a>, you need to wrap the snippet in something, so I wrapped my <code>ngInclude</code> in a <code>div</code>:</p>
  
  <pre><code>var link = $compile( '&lt;div&gt;&lt;ng-include src="\'/templates/activity-incident.html\'"&gt;&lt;/ng-include&gt;&lt;/div&gt;' );
  </code></pre>