title: How to re-render a directive template and link function?
body: <p>I am creating a navigation "tree" that basically allows you to navigate to parent views like so</p>
  
  <p><code>Home &gt; Planner &gt; Contacts &gt; john.smith@hotmail.com</code></p>
  
  <p>This list is just a normal <code>&lt;ul&gt;</code> that should get changed each time the view is changed and allow the user to click on any of the above links to navigate.  I am using <code>ui-router</code>'s <code>$stateChangeStart</code> event to build up my list of links, the problem is that my directive does not "re-build" this list every time the page change.</p>
  
  <p>Is there a way to force the directive to re-render every time I change my state?</p>
  
  <p><strong>TreeNav directive</strong></p>
  
  <pre><code>app.directive('treeNav', ['$rootScope', function ($rootScope) {
  
          return {
              replace: true,
              restrict: 'E',
              template: '&lt;ul&gt;\
                      &lt;li ng-repeat="item in treeNavs"&gt;\
                          &lt;a ui-sref="{{ item.state }}"&gt;{{ item.name }}&lt;/a&gt;\
                          &lt;span&gt; &gt; &lt;/span&gt;\
                      &lt;/li&gt;\
                     &lt;/ul&gt;',
              link: function (scope, elem, attrs) {
                  scope.treeNavs = $rootScope.treeNav.reverse();
  
                  scope.$watch('$rootScope.treeNav', function (newVal, oldVal) {
                  scope.treeNavs = newVal.reverse();
                  });
              }
  
          }
  
      }]);
  </code></pre>