Tengo varias selecciones múltiples en una página, cada una con un poco de lógica que llena esa selección múltiple desde el servidor, y quiero incluir cada una en una directiva.

Antes de intentar incluirlas en directivas, construí cada una 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

En la primera pasada, hago mis $ http llamadas desde aquí. Sí, lo sé, no las mejores prácticas, pero quería probar que esto me funciona a mí mismo primero.

  $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');
  }

Ahora quiero migrar esto a una directiva. Veo dos desafíos principales: 1.) ¿Cómo encapsulo todo el conjunto de opciones (por ejemplo, cuál es ahora el modelo de "todos los grupos") en la Directiva? 2.) Basado en experimentos iniciales, traté de construir físicamente el<select/> en la plantilla, pero me di cuenta de que tengo que manipular el DOM para reemplazar físicamente el nombre, ng-model y ng-options. Eso me llevó al atributo de compilación, pero a.) Que se siente mal y b.) Configuración<select ng-options="x for x in allgroups" /> en realidad no se repite una vez que se ha insertado en el DOM. Usar compilar no se siente bien; ¿Cuál es la forma correcta de abordar esto?

Aquí está mi primer intento de que la Directiva se vea así. Realmente no funciona, y creo que lo estoy haciendo incorrectamente:

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
  };
});

Claramente, aún no he llegado a la parte de carga del servidor, pero planeo transferir eso a un controlador en la Directiva, con la llamada $ http real en un servicio.

Siento que me estoy moviendo por el camino equivocado. Si tienes sugerencias sobre cómo realinear, por favor ayuda!