title: Dynamic update of ng-include through controller and directive Angualar-js
body: <p>Left side of the page sometimes have just info, sometimes it has side menu. When there is side menu, the content of main section depends on the option clicked.</p>
  
  <p>Since the same kind of layout is used in multiple places, I created nested directives for the link/info side menu. </p>
  
  <p>I have problem with the link option. Once link clicked, it calls the controller function to update the ng-include location of the main content holder. Controller does update the variable that holds the ng-include link, but ng-include does not include new template. </p>
  
  <p>HTML:
  Left Side</p>
  
  <p><code>&lt;left-side hasmenu='hasMenu' update-tab='updateTab' options='menuOptions'&gt;&lt;/left-side&gt;</code></p>
  
  <p>Main Content area:</p>
  
  <pre><code>&lt;div id="tabContentWrapper" class="left two-third-screen-tab " ng-include="tab"&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>    var myStatsController = angular.module('myStatsController', []);
  
      myStatsController.controller('StatsCtrl',
      ['$scope', '$rootScope',function ($scope, $rootScope){
  
      //default tab
      $scope.tab = 'stats/views/stats.html';
  
      $scope.updateTab = function(newTab){
               $scope.tab=newTab;                   
              };
  
      //all tabs
      $scope.menuOptions =[{'text':'Stats','link':'stats/views/stats.html','isTab':true,'isFullScreen':false},
                  {'text':'Summary','link':'stats/views/summary.html','isTab':true, 'isFullScreen':false}
      }]);
  </code></pre>
  
  <p>Directives:
  1) Left Side directive 
  HTML:</p>
  
  <pre><code>&lt;div class="sideMenu left"&gt;
  &lt;div ng-switch="hasmenu" class="sideMenuNavSection"&gt;
      &lt;side-menu ng-switch-when="true"  update-tab="updateTab(tab)" options='options'&gt;&lt;/side-menu&gt;
      &lt;side-info ng-switch-when="false" options='options'&gt;&lt;/side-info&gt;
  &lt;/div&gt;
  &lt;home-button&gt;&lt;/home-button&gt;
  </code></pre>
  
  <p></p>
  
  <p>Directive code:</p>
  
  <pre><code>//left side area
  myDirectives.directive('leftSide', function () {
  
  return {
      restrict: 'AE',
      replace: true,
      scope:
      {
          options: "=",
          hasmenu:"=",
          updateTab:"&amp;"
  
      },
      templateUrl: 'shared/leftSide.html'
  };
  </code></pre>
  
  <p>});</p>
  
  <p>2) Directive that choose what to display link or info sections:</p>
  
  <pre><code>//side navigation
  
  myDirectives.directive('sideMenu', function ($compile) {
  
  return {
      restrict: 'AE',
      scope: {
          options: "=",
          updateTab:"&amp;"
      },
      link: function (scope, element, attrs) {
  
  
          for (var item in scope.options) {
              if (scope.options[item].isTab === true) {
                  var link = scope.options[item];
                  element.append('&lt;tab-link update-tab="'+attrs.updateTab+'" fullscreen = "' + link.isFullScreen + '" linktext="' + link.text + '" options="' + link.link + '"&gt;&lt;/tab-link&gt;');
              }
              else {
                  // info section - not relevant for question
              }
              $compile(element.contents())(scope);
          }
  
      }
  };
  </code></pre>
  
  <p>});</p>
  
  <p>Finally Directive that constructs tabLink and calles controller function updateTab(newTab) to update $scope.tab for ng-include</p>
  
  <pre><code>myDirectives.directive('tabLink', function ($compile) {
  
  return {
      replace: true,
      restrict: 'AE',
      scope: {
          options: "@",
          linktext: "@",
          fullscreen: "@",
          updateTab:"&amp;"
      },
      template: '&lt;div class="infoText narrow "&gt;&lt;div class="sideMenuItem bold"&gt;&lt;a href="javascript:void(0);"&gt;{{linktext}}&lt;/a&gt;&lt;/div&gt;&lt;div class="greenArrow"&gt;&lt;/div&gt;&lt;/div&gt;',
      link: function (scope, element, attr) {
  
          var tab = document.getElementById('tabContentWrapper');
          tab = angular.element(tab);
  
          element.on('click', function (event) {
  
              //calls controller function
              scope.updateTab()(scope.options);
              $compile(tab.contents())(scope);  
          }); 
      }
  };
  });
  </code></pre>
  
  <p>Thanks</p>