var myApp = angular.module('DemoApp', []); myApp.value('optionConfig', { test : [ { label: 'Example 1', field: 'example1', values: [ { value: '1', label : 'One' }, { value: '2', label : 'Two' } ] }, { label: 'Example 2', field: 'example2', values: [ { value: 'hammer', label : 'Hammer' }, { value: 'banana', label : 'Banana' } ] } ] }); myApp.controller('ExampleController', function ($scope, optionConfig) { $scope.config = optionConfig.test; $scope.options = {}; }); myApp.directive('singleSelect', function () { var directive = {}; directive.restrict = 'E'; directive.template = [ '<select ng-model="value">', '<option value="{{value.value}}" ng-repeat="value in values">{{value.label}}</option>', '</select>' ].join(''); directive.scope = { value : '=ngModel', values: '=' }; directive.link = function (scope, element, attrs) { }; return directive; });
<div ng-app="DemoApp"> <div ng-controller="ExampleController"> <pre> My Options: {{options | json}} </pre> <div ng-repeat="option in config"> {{option.label}}: <single-select ng-model="options[option.field]" values="option.values"></single-select> <br /> </div> </div> </div>