controller.js

//https://codepen.io/anon/pen/gmeewN
//https://codepen.io/anon/pen/RpyVag
//https://codepen.io/anon/pen/QprqKZ
//https://codepen.io/anon/pen/MpPOMg
//https://codepen.io/anon/pen/VpEqOE
//https://codepen.io/anon/pen/MpzOEP
//https://www.webpackbin.com/bins/-Kgc4ylGu6eVLHnUQbyA
$scope.elements = [
            { type: 'text', id: 'DJDK-343434', label: 'edit label', value: 'holle' }
        ]

elmHtml.js

phonecatServices.factory('elmHtml', function() {
    return {
        text: '<input type="text" ng-model="defaultvalue">',
        paragraph: '<textarea ng-model="defaultvalue"></textarea>'
    };
});

formElm.js

phonecatDirectives.directive('formElm', function($compile, elmHtml) {
    return {
        'restrict': 'E',
        // 'require': '?ngModel',
        'scope': {
            "ngModel": "=" // two way binding
        },
        'controller': function($scope, $element) {
            $scope.hello = function() {
                alert('hello');
            }
            $scope.defaultvalue = $scope.ngModel.value;
            $scope.$watch('defaultvalue', function(value) {
                $scope.ngModel.value = value;
            })
        },
        'link': function(scope, element, attrs, ngModel) {
            console.log(elmHtml);
            // element.html('<input type="text" ng-model="defaultvalue">');
            // $compile(element.contents())(scope);
            scope.$watch('ngModel.type', function(value) {

                element.html(elmHtml[value]);
                $compile(element.contents())(scope);
            })
        }
    };
});