AngularJS - Directive template ngModel Hot Fix

Using terminal: true

by gavinfoley

HTML

<div data-ng-app="myApp">
    <div data-ng-controller="MyCtrl">
        <input dynamic-model-from-template="vm.test" data-log-model-value type="input" />
        
        <input ng-mode"vm.test" type="input" />
        
    </div>
</div>

CSS

</style> <!-- Ugly Hack due to jsFiddle issue: http://goo.gl/BUfGZ --> <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/foundation/4.1.6/css/foundation.min.css"> <link rel="stylesheet" href="//rawgit.com/minipai/ng-trans.css/master/ng-trans.min.css"> <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.1/lodash.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular.min.js"></script> <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.20/angular-animate.min.js"></script> 
<style>

JavaScript

//Include angular-ui dependency in resources on the side and as 'ui'
angular.module('myApp', ['ngAnimate'])

.controller("MyCtrl", function ($scope, $timeout) {
    $scope.vm = {
        test: 'Hello',
        array: ['Test 123']
    };
})


.directive('test', ['$compile',
    function ($compile) {
    
        var templateFunc = function (elm, attrs) {
            elm.attr("data-ng-model", attrs[this.name]);
            elm.removeAttr(attrs.$attr[this.name]);
        };
    
        return {
            priority: 1000,
            template: templateFunc,
            replace: false,
            transclude: true,
            terminal: true,
            link:  function postLink(scope, elm, attrs) {
                console.log("Linker for dynamicModelFromTemplate");
                $compile(elm)(scope);
            }
        }
    }
])





.directive('dynamicModelFromCompile', ['$compile',
    function ($compile) {
    
        var templateFunc = function (elm, attrs) {
            elm.attr("data-ng-model", attrs[this.name]);
            elm.removeAttr(attrs.$attr[this.name]);
        };
    
        return {
            priority: 1000,            
            replace: false,
            terminal: true,
            compile: function compile(elm, attrs) {
                console.log("Compile for dynamicModelFromCompile");
                
                elm.attr("data-ng-model", attrs.dynamicModelFromCompile);
                elm.removeAttr(attrs.$attr.dynamicModelFromCompile);
                
                return {
                    post: function postLink(scope, elm, attrs) {
                        console.log("Linker for dynamicModelFromCompile");
                        $compile(elm)(scope);
                    }
                }
            }
        }
    }
])
.directive('dynamicModelFromTemplate', ['$compile',
    function ($compile) {
    
        var templateFunc = function (elm, attrs) {
            console.log("Template func for...