When creating a directive, the templateUrl attribute can be set as a function that takes in two parameters: element and attributes. This function should return a string representing the URL of the template to be used for the element. By doing this, different templates can be displayed based on the attributes passed to the directive.

app.directive('infoDirective', function() {
    return {
            restrict: 'E',
            templateUrl: function(element,attributes){
                switch(attributes.template){
                     case "template1":
                     return "template.html";
                     //and so on
                }
            }
    };
});

Alternatively, a more simplified version can be implemented like this:

app.directive('infoDirective', function() {
    return {
            restrict: 'E',
            templateUrl: function(element,attributes){
                    //if you want to specify the templateURL
                    //directly in the attribute.
                    return attributes.template;
            }
    };
});

addresses your specific issue. For instance:

and here is the reference:

https://github.com/exampleuser/angular-template-dynamic

In the realm of JavaScript, everything is considered a String - even so-called JS "Objects"! Nonetheless, you have more flexibility when working with objects compared to pure strings. Remember this: HTML / CSS / JS all treat content as strings. So, if you encounter issues with non-object strings in JS, there are various solutions available. You can instantiate JS objects using "new ObjectName();" or opt for interpreting HTML code like this:

app.directive('contentItem', function ($compile) {
var imageTemplate = '<!-- Your image template here -->';
var videoTemplate = '<!-- Your video template here -->';
var noteTemplate = '<!-- Your note template here -->';

var getTemplate = function(contentType) {
    var template = '';

    switch(contentType) {
        case 'image':
            template = imageTemplate;
            break;
        case 'video':
            template = videoTemplate;
            break;
        case 'notes':
            template = noteTemplate;
            break;
    }

    return template;
}

var linker = function(scope, element, attrs) {
    scope.rootDirectory = 'images/';

    element.html(getTemplate(scope.content.content_type)).show();

    $compile(element.contents())(scope);
}

return {
    restrict: "E",
    link: linker,
    scope: {
        content:'='
    }
};
});

As mentioned earlier, there are several approaches to achieve your goal, but this method stands out as effective.

Here is a solution that could help you with your issue:

Check out this answer on Stackoverflow

You can also view the Plunkr example directly:

Plunkr Example

app.directive('myDirective', [function(){

return {
    template: '<div ng-include="getTemplate()"></div>',
    restrict: 'E',
scope: {template: '='},
link: function(scope, element, attr, ctrl) {
  var baseURL = 'templates/myDirective.'

  scope.getTemplate = function(){
      baseURL = "" //ignore this line
      return baseURL + scope.template + ".html"
    };
}
};
}]);

To improve your code organization, consider creating separate directives for different types of news. For example, have a directive for weather news and another for flash news. Each directive will have its own template, and you can inject the link function of your directive as if it were a service.

angular.module('newsModule', []).factory('link', function () {

  return function (scope, element, attrs, ctrl) {/*some logic here*/}; 

}).directive('flashNews', ['link', function (link){
  return {
            templateUrl: 'flash-news.html',
            link: link
  };
}]).directive('weatherNews', ['link', function (link){
  return {
            templateUrl: 'weather-news.html',
            link: link
  };
}]);

Use ng-repeat to loop through the news items based on their type:

<div ng-repeat="info in news">
    <div ng-if="info.type.weather">
      <weather-news></weather-news>
    </div>
    <div ng-if="info.type.flash">
      <flash-news></flash-news>
    </div>
</div>

Here is my solution to the issue at hand :

app.directive('information', function() {

return {
    restrict: 'E',
    scope: {
          data: '=',
    },
    link: function(scope) {
          scope.template = scope.data.template;
    },
    template:"<div ng-include='template'></div>"
};
});

Therefore

<div ng-repeat="data in news.news">
    <information data="data"></information>
</div>

Thank you to everyone for your input, but there's a little issue that I'm facing...

Every time I try to do this

<div ng-repeat="info in news">
    <info-directive template="info.template"></info-directive>
</div>

The problem arises when the info.template is treated as a String and I'm unable to access the value of the variable in my directive which is:

app.directive('infoDirective', function() {
    return {
        restrict: 'E',
        templateUrl: function(element,attributes){
                console.log(attributes.template);
                return attributes.template;
        }
    };
});

Even if I try using variables like $index or using {{ }} to manipulate variables into strings, nothing seems to work... For example, if I include template="{{info.template}}" in the info-directive, I end up with {{info.template}} instead of default_template.html in the templateUrl...

Any thoughts on how to solve this?