Tenho várias seleções múltiplas em uma página, cada uma com um pouco de lógica que preenche essa seleção múltipla do servidor, e quero envolver cada uma delas em uma diretiva.

Antes de tentar envolvê-los em diretivas, eu construí cada um como tal:

index.html

<select name="groups" ng-model="inputs.groups" ng-change="groupsChanged()" ng-options="g for g in allgroups" multiple></select>

controllers.js

Na primeira passagem, faço minhas chamadas $ http daqui. Sim, eu sei, não as melhores práticas, mas eu queria provar que isso funciona comigo primeiro.

  $scope.loadSelect = function(_url) {
    $http({
      url: _url,
      method: 'POST',
      data: $scope.inputs,
      model: 'all' + _url
    }).success(function(data, status, headers, config) {
      $scope[config.model] = data;
    });
  };

  // Fill groups
  $scope.loadSelect('groups');

  // When groups change, reload other select fields that depend on groups
  $scope.groupsChanged = function() {
    $scope.loadSelect('categories');
    $scope.loadSelect('actions');
  }

Agora quero migrar isso para uma diretiva. Vejo dois grandes desafios: 1.) Como encapsular o conjunto de opções (por exemplo, o que é agora o modelo "allgroups") na Diretiva? 2.) Com base em experimentos iniciais, tentei construir fisicamente<select/> no template, mas percebi que tenho que manipular o DOM para substituir fisicamente name, ng-model e ng-options. Isso me leva ao atributo de compilação, mas a.) Que parece errado e b.<select ng-options="x for x in allgroups" /> não se repete depois de ter sido inserido no DOM. Usar compilação não parece certo; Qual é o caminho certo para abordar isso?

Eis a minha primeira tentativa de aplicação da directiva. Realmente não funciona, e acho que estou indo de um jeito incorreto:

index.html

<dimension ng-model="inputs.users" alloptions-model="allusers">Users</dimension>

directives.js

directive('dimension', function() {
  return {
    restrict: 'E',
    scope: {
      ngModel: '=',
      alloptionsModel: '='
    },
    template:
        '<div>' + 
          '<label ng-transclude></label>' +
          '<fieldset>' +
              '<div class="form-group">' +
                '<select ng-model="{{ngModel}}" ng-options="x for x in {{alloptionsModel}}" multiple class="form-control"></select>' +
              '</div>' +
           '</fieldset>' +
        '</div>',

    replace: true,
    transclude: true
  };
});

Obviamente, ainda nem cheguei à parte de carregamento do servidor, mas pretendo implementá-lo em um controlador na Diretiva, com a chamada $ http real em um serviço.

Eu sinto que estou indo pelo caminho errado. Se você tiver sugestões sobre como realinhar, por favor ajude!