angularjs - Directive with <select ng-options> and indirection -

i have several multi-selects on page, each bit of logic fills multi-select server, , want wrap each 1 directive.

before trying wrap these directives, built each such:

index.html

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

controllers.js

in first pass, $http calls here. yes, know, not best practices, wanted prove works myself first.

  $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 depend on groups   $scope.groupschanged = function() {     $scope.loadselect('categories');     $scope.loadselect('actions');   } 

now want migrate directive. see 2 major challenges: 1.) how encapsulate entire set of options (e.g. "allgroups" model) directive? 2.) based on initial experiments, tried physically build <select/> template, realized have manipulate dom physically replace name, ng-model, , ng-options. lead me compile attribute, a.) feels wrong , b.) setting <select ng-options="x x in allgroups" /> doesn't repeat after it's been inserted dom. using compile doesn't feel right; what's right way approach this?

here first attempt @ directive looks this. doesn't work, , think i'm going incorrectly:

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 x in {{alloptionsmodel}}" multiple class="form-control"></select>' +               '</div>' +            '</fieldset>' +         '</div>',      replace: true,     transclude: true   }; }); 

clearly haven't gotten server load part yet, plan roll controller in directive, actual $http call in service.

i feel i'm moving down wrong track. if have suggestions on how realign, please help!

the main problem directive can't use mustache binding in ngmodel , ngoptions directive because evaluated directly. can directly bind scoped property (ngmodel , alloptionsmodel):

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 x in alloptionsmodel" multiple class="form-control"></select>' +               '</div>' +            '</fieldset>' +         '</div>',     replace: true,     transclude: true   }; }); 

see this plunkr working example.

edit compile route, there nothing wrong it. useful when need dynamically create template case when select's item template.

compile: function(telement, tattrs) {   var select = telement.find('select'),       value = tattrs.value ? 'x.' + tattrs.value : 'x',       label = tattrs.label ? 'x.' + tattrs.label : 'x',       ngoptions = value + ' ' + label + ' x in alloptionsmodel';        select.attr('ng-options', ngoptions); }  // in html file <dimension ng-model="inputs.users"             alloptions-model="allusers"            label="name">   users </dimension> 

i've updated plunkr compile function.