Replace the html of an element with the content of an external template in a directive?

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: ``` link: function(scope, element, attrs, ngModel) { scope.$on("$routeChangeSuccess", function (event, current, previous) { element.html('<div ng-include=\'enterprisesMenu.html\'></div>'); }); }; ``` 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 `element.html('<div ng-include src=\'enterprisesMenu.html\'></div>');` Any ideas?