title: AngularJS Directive - compile is not working
body: <p><code>ng-click</code> is not working. Can someone help me, how to use the <code>$compile</code>?</p>
  
  <p>I have created a plunker <a href="http://plnkr.co/edit/AhxGYnOsJ7rPqcQquMfq?p=preview" rel="nofollow">http://plnkr.co/edit/AhxGYnOsJ7rPqcQquMfq?p=preview</a></p>
  
  <pre><code>// main.js
  var app = angular.module('myApp', ['ngGrid']);
  app.controller('MyCtrl', function($scope) {
  
  })
  .directive('myDir', function($compile){
    return {
      restrict: 'CAE',
      link: function(scope, element, attrs){
        var dropdown = '';
        dropdown += '&lt;ul class="dropdown-menu pull-right" role="menu" aria-labelledby="'+ attrs.id +'"&gt;';
        dropdown += '&lt;li role="presentation"&gt;&lt;a href="javascript:void(0);" ng-click="alert(\'a\')"&gt;Actions&lt;/a&gt;&lt;/li&gt;';
        dropdown += '&lt;/ul&gt;';
        //dropdown = $compile(dropdown)(scope);
        element.after(dropdown);
      }
    }
  });
  </code></pre>