title: Replace the html of an element with the content of an external template in a directive?
body: <p>I'm trying to create a directive which is a sidebar in my shell page that will change accordingly whenever a new route is hit, and will populate itself with the sub menu items relevant to that parent route. I have 4 different menus which are external templates and i want the contents of those html files to replace the menu, the link function of my directive looks like this so far:</p>
  
  <pre><code>link: function(scope, element, attrs, ngModel) {
        scope.$on("$routeChangeSuccess", function (event, current, previous) {
                     element.html('&lt;div ng-include=\'enterprisesMenu.html\'&gt;&lt;/div&gt;');
                  });
        };
  </code></pre>
  
  <p>But the element is not updating, however when i use inline templates the elements updates according, but because each template is complex i prefer not to have that html inside my directive, I've also tried <code>element.html('&lt;div ng-include src=\'enterprisesMenu.html\'&gt;&lt;/div&gt;');</code></p>
  
  <p>Any ideas?</p>