How to dynamically load templates in AngularJS based on user roles?
I'm wondering if anyone has experience with I'm prototyping a solution and I'm trying to debug I'm working on a project and hit a roadblock. I'm working on an AngularJS 1.8 application where I need to dynamically load different templates based on the user's role. I've set up a service that determines the user's role and returns a string value like 'admin', 'editor', or 'viewer'. However, I'm struggling with how to use this role to load the corresponding template in my controller. Currently, I have a template URL like this: ```javascript $scope.templateUrl = 'templates/' + $scope.userRole + '.html'; ``` But when I try to use it in my HTML, like this: ```html <div ng-include="templateUrl"></div> ``` It seems to load the default template instead of the one based on the user role. This scenario continues even after using `$scope.$apply()` to force a digest cycle after setting the `userRole`. I've also tried using `$watch` on `userRole` to see if changes trigger the include, but it doesn’t seem to work as expected either. The templates are correctly available in the specified path, and I verified that the `$scope.userRole` gets updated correctly, but it doesn't seem to reflect on the included template. Is there a specific way to handle dynamic loading of templates in AngularJS that considers such role-based scenarios? I could really use some guidance on this. For context: I'm using Javascript on Ubuntu. Any ideas what could be causing this? I'm working in a Windows 10 environment. I'd be grateful for any help. I'm working on a service that needs to handle this. This is for a web app running on Windows 10.