Change template in angular directive dynamically
<p>I have a controller, that has some variables:  </p>

<pre><code>.controller('DataProvider', function($scope, $timeout, $mdSidenav, $mdDialog, $mdMedia, $mdToast, selectedData) {
    $scope.provider;
    $scope.providers = [{
        name: 'jsonProvider',
        displayNmae: "jsonProvider"
    }, {
        name: 'imageProvider',
        displayNmae: "imageProvider"
    }];
    $scope.props = {
        id:_guid(),
        provider:''
    }
    this.providerWasChange = function() {}
})
</code></pre>

<p>It is just little part of controller functions. <code>$scope.props</code> - is model from json data.<br>
Also, there is directive that should take controller's selected provider and change template, and as possible bind all <code>$scope.props</code> to updated template.<br>
There is my wrong attempt of creating directive:</p>

<pre><code>.directive('provider', function([$compile, $templateCache, function($compile, $templateCache) {
    var getTemplate = function(data) {
        function templateId() {
            switch (data.name) {
                case 'jsonProvider':
                    return 'jsonProvider-template.html';
                case 'imageProvider':
                    return 'imageProvider-template.html';
            }
        }

        var template = $templateCache.get(templateId(data));
        return template;
    }

    return {
        templateUrl: '',
        transclude: true,
        scope: {
            provider: '@'
        },
        replace: true,
        restrict: 'E',
        require: '?NgModel',
        link: function(scope, element) {
            var template = getTemplate(scope.$parent.provider)
            element.html(template)
            $compile(element.contents())(scope)

            scope.$parent.$watch(function() {
                return scope.$parent.provider;
            }, function(newVal, oldVal, scope) {
                console.log(newVal)

                var template = getTemplate(scope.$parent.provider)
                element.html(template)
                $compile(element.contents())(scope)


            })
        }
    }
}]))
</code></pre>

<p>And there is html code:</p>

<pre><code>&lt;md-tab id='layerProviderWrapper'&gt;
                            &lt;md-tab-label&gt;Provider data&lt;/md-tab-label&gt;
                            &lt;md-tab-body&gt;
                                &lt;div layout="column" ng-controller="layerProvider"&gt;
                                    &lt;md-input-container style="width:90%"&gt;
                                        &lt;label&gt;Chose provider data&lt;/label&gt;
                                        &lt;md-select ng-model="provider" ng-change="providerWasChange()"&gt;
                                            &lt;md-option&gt;&lt;em&gt;None&lt;/em&gt;&lt;/md-option&gt;
                                            &lt;md-option ng-repeat="provider in providers" ng-value="provider"&gt;
                                                {{provider.displayNmae}}
                                            &lt;/md-option&gt;
                                        &lt;/md-select&gt;
                                    &lt;/md-input-container&gt;

              problems starts here:  &lt;provider&gt; &lt;/provider&gt;

                                &lt;/div&gt;
                            &lt;/md-tab-body&gt;
                        &lt;/md-tab&gt;
</code></pre>

<p> template should take ng-models from 'DataProvider' controller.
I know on StackOverflow was several similar questions, but no one of them helps me....</p>

<p><a href="https://jsfiddle.net/0jLt0u0L/2/" rel="nofollow noreferrer">https://jsfiddle.net/0jLt0u0L/2/</a>
There is example, but I don't know how to create template there.... In template, for example, show selected provider from controller.</p>