[AngularJS] How to compile dynamically added directive in angular

I Have one scenario where i am adding directives dynamically from another directive of an html element.The problem is that the dynamically loaded directive couldn't get compiled. 

1.my html element look like,

<div class="form-control contentEditDiv" fg-custom-attributes fg-field-input="" fg-placeholder="field.schema.placeholder" ng-model="form.data[field.schema.name]" title="{{ field.schema.tooltip }}" tabindex="{{ tabIndex }}" ng-required="field.schema.validation.required" ng-minlength="{{ field.schema.validation.minlength }}" ng-maxlength="{{ field.schema.validation.maxlength }}" ng-pattern="{{ field.schema.validation.pattern }}"></div></div>');

2. directive code to add dynamic directives,

fg.directive('fgCustomAttributes', function($compile) {

  /*

    This Directive which will add custom attributes at the time of rendering the template. 

    */

    return { 

      scope:true,

      link: function($scope, $element, $attrs) {

        if($scope.form.schema.fields.length>0){

           for(var n=0;n<$scope.form.schema.fields.length;n++){

             if($scope.form.schema.fields[n].customlist!== undefined){

              optionsOfDirective= $scope.form.schema.fields[n].customlist;

              for (var i = 0; i < optionsOfDirective.length; i++) {

                var text = optionsOfDirective[i].text;

                var value = optionsOfDirective[i].value;

                $element.attr(value, text); //adding directive dynamically from an object

                           /* here the dynamically added directive couldn't get compiled. */

          }

        }

      }

    }

      }

    };

  });

3. At last the element look like,

<div class="form-control contentEditDiv ng-scope ng-pristine ng-valid ng-valid-required" fg-custom-attributes="" fg-field-input="" fg-placeholder="field.schema.placeholder" ng-model="message" title="Content to be posted" tabindex="auto" ng-required="field.schema.validation.required" ng-minlength="" ng-maxlength="" ng-pattern="/"contenteditable="true" ng-class="{focused: hasFocus}" no-line-breaks="true" strip-br="false" select-non-editabl="true" id="contentEditDiv" placeholder="Content goes here"></div>

here the yellow background text is indicating the newly added directives but which are no getting compiled.

Please help me to sort out this issue..

Could any one please help me to sort out this issue.



Below is a directive I use for dynamically loaded html with angular content. I haven't used this inside another directive, but it might get you going:

<div dynamic="html_with_angular_here"></div>

App.directive('dynamic', function ($compile) {
        return {
            restrict: 'A',
            replace: true,
            scope: { dynamic: '=dynamic'},
            link: function postLink(scope, element, attrs) {
                scope.$watch( 'dynamic' , function(html){
                    element.html(html);
                    $compile(element.contents())(scope);
                });
            }
        };
    });

Thank you for your valid reply.

Actually am using the dynamic directive inside a directive. While i using the $compile inside the directive the outcome will be a infinite loop. How can i fix this issue while i have loading a directive inside another directive.

If you have questions like this, and want a swift reaction, it's a good idea to provide a plunker/codepen/jsbin, so that anyone that is willing to help you can see your code in action.

In your case, you can use priority to prevent the infinite loop. give the directive a priority of say 5000, and use that as the 3th parameter for your $compile function.

At last i have got the solution for this. Thank you for your suggestions which is appreciable.