ng-isolate-scope in each child directive along with ng-repeat in AngularJS

Question

The HTML template contains the nested directives. The child directive will create the element or fields based on the data injected to it. So field can be type of dropdown, input field etc. I suspect that the issue with the ng-isolate-scope. The ng-isolate-scope is not creating for child directive and the fields are not being rendered and this is intermittent issue.

My code is similar to the code snippet below.

Following is the parent directive:

angular.module('app')
  .directive('parent', ['service1', 'service2', 'service3',
    function (service1, service2, service3) {
    return {
      restrict: "E",
      scope: {
        formModel: "=",
        ....
      },
      template: function (elem, attr) {
        if (service1.abc === 'abc') {
          return '<div ng-repeat="field in wuFields">' +
            '<child ' +
            'ng-if="<SOME CONDITION>" ' +
            'field="field" form-model="formModel" ' +
            '</child>' +
            '</div>';
        } else {
          return '<OTHER_TEMPLATE></OTHER_TEMPLATE>';
        }
      },
      compile: function () {
        return {
          pre: function (scope, elem, attrs) {
            // some logical part
          }
        }
      }
    }
  }]);

Following is the child directive:

angular.module('app')
  .directive('child', ['$compile', 'service1', 'service2', 'service3',
    function ($compile, service1, service2, service3) {
    return {
      restrict: "E",
      require: "^form",
      scope: {
        formModel: "=",
        field: "=",
        ....
      },
      link: function (scope, elem, attrs, form) {
        // some logical part
        ....
        function init () {
            elem.append(dropdownTemplate(scope.field));
            $compile(elem.contents())(scope);
        }
        function dropdownTemplate(fieldInfo) {
            // some logical part to generate the template
            return '<div ng-if="' + validateField(fieldInfo) + '"></div>';
        }
        function validateField(field) {
           //some logical
           return isValid;
        }
        init();
      }
    }
  }]);

Current Output:

Child directive doesn't have the class ng-isolate-scope even if the ng-if condition is true. So the field is not rendered here.

<parent form-model='dataModel' class="ng-isolate-scope">
  <div ng-repeat="field in wuFields" class="ng-scope">
    <child ng-if="field.data && field.data.isValid" field="field" form-model="formModel" class="ng-scope">   
    </child>
  </div>
</parent>

Expected output:

Sometimes the ng-isolate-scope is getting added in the class and fields rendered properly.

<parent form-model='dataModel' class="ng-isolate-scope">
  <div ng-repeat="field in wuFields" class="ng-scope">
    <child ng-if="field.data && field.data.isValid" field="field" form-model="formModel" class="ng-scope ng-isolate-scope">
    </child>
  </div>
</parent>