title: Change template in angular directive dynamically
body: <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>