create directive in ng-repeat

Question

I have a directive, which I would like to use to generate other directives. The following doesn't work:

    <span ng-repeat="picker in pickers | filter:{type:'click'}">
      <span picker.name></span>
    </span>

How can I use picker.name to create more directives inside this ng-repeat?

-- Background

We have a main 'picker service', which injects a couple of services 'picker Local', 'picker Dropbox', 'picker Googledrive'.

function pickerService($filter, pickerDropboxService, pickerGoogledriveService, pickerLocalService){
    // list pickers
    this.pickers = [pickerDropboxService, pickerGoogledriveService, pickerLocalService];
}

We have a picker directive which basically loops through the pickers and tries to create a custom directive for each of them:

        <span ng-repeat="picker in pickers">
          {{picker.name}}
          <span {{picker.name}}></span>
        </span>

Each picker (Local, Dropbox, Googledrive) declares a directive, and I would like to use this directive from my main picker directive.

Thanks

Answer 1

the best solution seems to use 'compile' in the directive:

directive.html:

<span id='pickerButtons'></span>

directive.js:

    'compile': function(element, attributes) {

        var pickerButtons = document.querySelector('#pickerButtons');
        var span = document.createElement('span');
        span.innerHTML = '';

        for (var i=0,  tot=pickerService.pickers.length; i < tot; i++) {
            if(pickerService.pickers[i].type === 'button'){
                span.innerHTML += '<span><span picker-' + pickerService.pickers[i].name + '></span></span>';
            }
        }

        pickerButtons.appendChild(span);

        var linkFunction = function($scope, element, attributes) {
            $scope['pickFrom'] = function(pickerObject){pickerService.pickFrom(pickerObject);};
            $scope['pickList'] = pickerService.getPickList();
        };

        return linkFunction;
    }