how to add directives dynamically while using ng-repeat in angular js?

i have the following code on my homepage:-

<ul>
     <li ng-repeat="item in list"  ng-controller="controller1"></li>
</ul>

now item has various properties like item.type, item.title, item.content, item.webService...

if the item.content is null then the item.webService is called to get the content and each item.type has its own template of rendering

so i thought of writing directives for each item.type which takes care of manipulating DOM on its own from the template: and link properties
in link: i call the webservice get the content
in template: i specify the template for the particular item.type...

directive("directive1", function ($http) {
try {
    return {
        restrict: "E",

        transclude: true,
        scope: {


            sWebServicePath: "="
        },

        template: template1,

        link: function (scope, element, attrs) {

            var request = {};

            $http({ method: "POST", url: scope.sWebServicePath, data: request }).
            success(function (data, status) {
                scope.response = data;
            }).
            error(function (data, status) {
                alert("Service Call Error");
            })
        }
    }
}
catch (e) {
    alert(e);
}
});

so, type1 is handled by directive1 type2 by directive2 and so on..

now i want controller1 to have the above specified mapping say in

<ul>
     <li ng-repeat="item in list"  ng-controller="controller1"></li>
</ul>

when the controller1 encounters item.type=1 then it should call directive1 which in turn would call the item.webservice get the data and would include the template1 with the response from webservice

what is the ideal way to achieve the mentioned functionality? please do comment if there is an alternative thank you!