app.directive('customcontrol', ['$compile', function($compile) {
    return {



        link: function(scope, element, attrs) {

            modelngQTY = "selectedOptions[value.CustomID].Details[value.DetailID].QTY";



            templates = {

                example: "<div class='tableBorder'><label> <input ng-model='" + modelngQTY + "'  type='number' name='{{value.DetailID}}' /> {{value.Text + ' ' + value.CustomID + ' - ' + value.Type | lowercase}}  </label> </div>",

            }

            var html = templates[attrs.type];
            if (attrs.value) {

                scope.value = scope.$eval(attrs.value);
                element.replaceWith($compile(html)(scope));
            }
        }
    };

}]);

Setting Validate Copy Format

 <div ng-repeat="x in CustomOptions">


                        <div class="optionHeading" ng-click="invertShow(x.CustomID)" childID="{{x.CustomID}}"><h3>{{x.Title}} </h3></div> 

                        <div ng-show="shouldShow(x.CustomID)" id="{{x.CustomID}}">

                            <div class="listing" ng-repeat="y in CustomOptionDetails | filter:{CustomID:x.CustomID}:true as filtered">

                           
                                <div customcontrol type="{{x.Type | lowercase}}" value="{{y}}"></div>

                            </div>


  					<!--customcontrol is the template and based on the type it builds and compiles the html-->
                            <div ng-if="filtered.length ==0" customcontrol type="{{x.Type | lowercase}}" value="{{x}}" ng-model="selectedOptions.CustomID[x.CustomID]"></div>

                        </div>



                </div>

Copy Format

Download