Update element created by directive on change of controller variable

Question

I am trying to create an angular app where user can create a dynamic form. In this user can create form fields and save form metadata, which is then used to display actual form. There is live preview, which uses directive to create elements.

As I am new to angular, I cant figure out why binding is not working and what changes do I need in order to make it work. What I need here is that live preview section should update as soon as the above data changes. Say, I change type from text to password, input box in live preview should become of type password. The following code is snippet from main app. Unfortunately, I can't change angular version.

HTML

<form ng-submit="">
    <div ng-repeat="tagfield in tagfields">
        <dynamic-form dataobject="tagfield"></dynamic-form>
    </div>
    <button type="reset">Reset</button>
    <button type="submit">Submit</button>
</form>

Script

app.directive('dynamicForm', [ '$rootScope', function($rootScope){
    return{
        restrict: 'E',
        scope: {
            dataObject:'=dataobject'
        },
        link: function(scope, element, attrs){
            element.append(
                    'Sample directive ' + scope.dataObject.selectmodel
                    + '<input type='+scope.selectmodel+' 
                       ng-model='+scope.dataObject.idmodel+'>'
            );
        }
    }

}]);

Detailed code here in plunker

https://embed.plnkr.co/7jBm9vxSx3y1hCCwjy1w/

Answer 1

please try the below code in plunker and let me know if it works

app.directive('dynamicForm', [ '$compile', function($compile){
return{
    restrict: 'E',
    scope: {
        dataObject:'=dataobject'
    },
    link: function(scope, element, attrs){

        var el  ="Sample directive <span>" + scope.dataObject.selectmodel
                + "</span><input type="+scope.dataObject.selectmodel+ "ng-value="+scope.dataObject.idmodel+"/>";
        element.append(el);
        scope.$watch('dataObject.selectmodel',function(newvalue,oldvalue){

        if(oldvalue !=newvalue)
         addelement(newvalue);
        },true)

        function addelement(valuedata)
        {
               element.children().remove()
                var el  ="Sample directive <span>" +             scope.dataObject.selectmodel
                + "<span>"+"<input type='"+valuedata+ "'ng-value='"+scope.dataObject.idmodel+"'/>'";
        element.append($compile(el)(scope));

        }
    }
}

}]);