title: How to update Directive on State Changes
body: <p>I have a root state that defines the overall structure of the Angular template. In the root state, I have the sidebar included that has dynamic menus via directive that changes based on the state. Like this:</p>
  
  <pre><code>.state(‘root', {
              abstract: true,
              url: ‘/root',
              templateUrl:  ‘views/root.html',
          })
  </code></pre>
  
  <p><code>root.html</code> includes the <code>sidebar.html</code> that has dynamic menu called through Directive like this:</p>
  
  <p><code>sidebar.html</code></p>
  
  <pre><code>  &lt;ul class="nav" id="side-menu"&gt;
          &lt;li class="nav-header"&gt;
                  &lt;img alt="avatar" ng-src="{{ avatar }}" /&gt;
          &lt;/li&gt;
  
          &lt;!—Dynamic Menus Directive --&gt;
          &lt;li sidebar-menus&gt;&lt;/li&gt;
      &lt;/ul&gt;
  </code></pre>
  
  <p>The directive shows the menu based on <code>$state.includes()</code>. But what happens is, the directive shows fine in the first load but it doesn’t update the directive during state changes. To resolve this, I tried the following methods but nothing worked:</p>
  
  <ol>
  <li>Added the <code>$state</code> to <code>scope</code> in Main controller but it still doesn’t change the directive
  once it is compiled first. </li>
  <li>Tried adding <code>$stateChangeSuccess</code> watcher to trigger recompiling the directive, but it doesn’t
  recompile again after the first time (or) maybe it is recompiling but the changes are not seen in the template (this is the code I have now
  which I will give below). </li>
  <li>Moving the sidebar inside separate child
  states instead of having it in root state works, but it beats the
  purpose since I am trying to load the overall structure in the root
  state first and only refresh the menu sections in subsequent state
  changes.</li>
  </ol>
  
  <p>I am not really sure how to approach this. I have a feeling my approach can be out of whack and hoping someone can guide me here. This is my directive code at the moment:</p>
  
  <pre><code>.directive('sidebarMenus', ['$compile', '$state', '$rootScope',
      function($compile, $state, $rootScope) {
  
      return {
          restrict: 'A',
          replace: true,
          link: function(scope, element, attrs) {
  
              var state = scope.$state; // Scope from Main Controller
  
              // HTML Template
              function contructHtml(state) {
  
                  var htmlText = '';
  
                  // First Child State
                  if (state.includes('root.child1')) {
                      var htmlText =  '&lt;li&gt;Child 1 Menu&lt;/li&gt;';
                  }
                  // Second Child State
                  if (state.includes('root.child2')) {
                      var htmlText =  '&lt;li&gt;Child 2 Menu&lt;/li&gt;';
                  }
                  // Third Child State
                  if (state.includes('root.child3')) {
                      var htmlText =  '&lt;li&gt;Child 3 Menu&lt;/li&gt;';
                  }
  
                  $compile(htmlText)(scope, function( _element, _scope) {
                              element.replaceWith(_element);
                  });
  
              } 
  
              $rootScope.$on('$stateChangeSuccess', function() {
                      var state = scope.$state; // scope.$state is added in main controller 
                      contructHtml(state);
               });
  
               // Initial Load 
               contructHtml(state);
          }
      }
  }])
  </code></pre>