title: AngularJS load tabbed content directive dynamicly
body: <p>I have a tabbed navigtion in my webapp that looks like this
   <img src="https://i.stack.imgur.com/x8Sf6.png" alt="enter image description here"></p>
  
  <p>Now I want to Change the directive each time the user clicks on one of the Navigation points. My Idea was to init the page with the first template.</p>
  
  <pre><code>$scope.currentDirective = $compile('&lt;div order-Sale&gt;&lt;/div&gt;');
  </code></pre>
  
  <p>Then when the user clicks on a tab, I wanted to change and compile the content again with a new directive in it. But for some reason this is not working. How would you proceed in order to archive this dynamic content loading? I really want to only  load the content on necessary need and not just to show or hide it. I think using directives is the right way to go for it, but I'm a but stuck at the implementation... Someone any pointer ? (I don't want to use any jQuery)</p>
  
  <p>What I tried [Edit]:</p>
  
  <p>The <strong>controller.js</strong></p>
  
  <pre><code>    app.controller('pageController',['$scope','$compile', function($scope, $compile){
  
        var templates = ['&lt;div first-template&gt;&lt;/div&gt;','&lt;div second-template&gt;&lt;/div&gt;'];
  
        $scope.currentTemplate = $compile(templates[0]);
  
        $scope.changeTemplate = function(id) {
  
          $scope.currentTemplate = $compile(templates[id]);
  
        };
  
    }]);
  </code></pre>
  
  <p>The <strong>HTML</strong></p>
  
  <pre><code>&lt;div ng-controller="pageController"&gt;
      &lt;li&gt;
          &lt;a ng-click="changeTemplate('1')"&gt;Change Template&lt;/a&gt;
      &lt;/li&gt;
      {{currentTemplate}}
  &lt;/div&gt;
  </code></pre>