title: Directive generate directive field dynamically does not compile
body: <p>I have created basic <strong>HTML</strong> field generator directive called <strong>field</strong> as like below</p>
  
  <pre><code>app.directive('field',function(){
          return {
              restrict : "E",
              scope : {
                 fielddata : '='
              },
              link : function(scope,elem,attr){
                  var content;
                  scope.Options = {
                      id: scope.$id+'_'+elem.attr('id'),
                      label : elem.attr('label'),
                      placeholder : elem.attr("placeholder"),
  
                  };
                  scope.contentUrl = 'templates/fields/'+elem.attr('template')+'.html';           
              },
              template: '&lt;div ng-include="contentUrl"&gt;&lt;/div&gt;'
          }
      }) 
  </code></pre>
  
  <p>I can able to generate fields as like below </p>
  
  <pre><code>&lt;field id="NAME" template="text" label="First Name" placeholder="Enter First Name" fieldData="NAME"&gt;&lt;/field&gt;
  </code></pre>
  
  <p>Check this <a href="http://plnkr.co/edit/ako1jjdv9VdKgWyFEDxY?p=preview" rel="nofollow">plunker</a></p>
  
  <p>Extending the functionality to generate  element directive itself. Have simple object to setup the <strong>field</strong> element and use another directive to generate <strong></strong> element directive </p>
  
  <p><strong>Controller</strong></p>
  
  <pre><code>app.controller('contactController', ['$scope', 'dataService',function($scope,dataService) {
          $scope.message = 'Contact us! . This is just a demo.';
          dataService.getContactData().then(function(data) {
              $scope.NAME = data.first_name;
              $scope.LNAME = data.last_name;
              $scope.DESC = data.description;
          });
            $scope.fields= [
              {
                elements: [
                              {
                                  template_name : "text"
                                  id: "NAME",
                                  label: "First Name",
                                  placeholder : "First Name"
                              }           
                          ],
                html: '&lt;div ng-repeat="elem in t.elements"&gt;&lt;field id="{{elem.id}}" template="{{elem.template_name}}" label="{{elem.label}}"  placeholder="{{elem.placeholder}}""  fieldData="{{elem.id}}" &gt;&lt;/field&gt;&lt;/div&gt;'
              }
            ];
      }]);
      app.directive("bindCompiledHtml", function($compile, $timeout) {
        return {
          template: '&lt;div&gt;&lt;/div&gt;',
          scope: {
            rawHtml: '=bindCompiledHtml'
          },
          link: function(scope, elem, attrs) {
            scope.$watch('rawHtml', function(value) {
              if (!value) return;
              var newElem = $compile(value)(scope.$parent);
              elem.contents().remove();
              elem.append(newElem);
            });
          }
        };
      });
  });
  </code></pre>
  
  <p>Say <strong>contact.html</strong></p>
  
  <pre><code>&lt;div ng-repeat="t in fields" bind-compiled-html="t.html"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>My issue is, <strong>bindCompiledHtml</strong> Directive generate  elements and calling <strong>field</strong> directive as expected but it value is not get parsed. Setting Break point from field directive link function gives <strong>elem</strong> as below</p>
  
  <pre><code>[
  &lt;field id=​"{{elem.id}​}​" template=​"{{elem.template_name}​}​" label=​"{{elem.label}​}​" placeholder=​"{{elem.placeholder}​}​" class=​"ng-isolate-scope"&gt;​
  &lt;!-- ngInclude: contentUrl --&gt;
  &lt;/field&gt;​
  ]
  </code></pre>
  
  <p>and console gives following error </p>
  
  <pre><code>/templates/fields/%7B%7Belem.template_name%7D%7D.html 404 (Not Found) 
  </code></pre>
  
  <p>To see 404 Please check this <a href="http://plnkr.co/edit/Q7Zzm0Km4R3x93i3g5nI?p=preview" rel="nofollow">plunker</a> console</p>
  
  <p>How do we call <strong>field</strong> directive once all its value get parsed with isolate scope ? Please advice</p>