a directive to show a single available item as a text box

single-select-directive.js

(function() {
 var app = angular.module('mcbSingleSelect', [])
 .directive('singleSelect', [singleSelectDirective]);

 function singleSelectDirective() {
 return {
 restrict: 'EA', //E = element, A = attribute, C = class, M = comment 
 scope: {
 //@ reads the attribute value, = provides two-way binding, & works with functions
 optionsList: '=?',
 name: '@',
 model: '=?',
 displayKey : '@'
 },
 templateUrl: 'directive/single-select-directive.html'
 // template: function(ele, atts) {
 // 	console.dir(atts.displayKey);
 // return '<div> ' +
 // '<div ng-show="optionsList !== undefined && optionsList.length > 1"> ' +
 // '	<select class="form-control" name="{{name}}1 ' +
 // ' ng-options="item.' + atts.displayKey + ' for item in optionsList" ng-model="model" ' +
 // ' required> ' +
 // ' </select> ' +
 // '</div> ' +
 // '<div ng-show="optionsList === undefined || ( optionsList.length < 2)"> ' +
 // '<input class="form-control" name="{{name}}" ' +
 // 'ng-model="model.' + atts.displayKey + '" ' +
 // 'readonly> ' +
 // '</input> ' +
 // '</div> ' +
 // '</div> ';
 // }
 };
 }


})();
/**
<div>
	<div ng-show="optionsList !== undefined && optionsList.length > 1">
		<select class="form-control" name="{{name}}1 "
							 ng-options="item.{{display}} for item in optionsList" ng-model="model"
 required>
 </select>
 </div>
 <div ng-show="optionsList === undefined || ( optionsList.length < 2)">
		<input class="form-control" name="{{name}}"
				ng-model="model.display" 
		readonly>
 </input>
 </div>
</div>
*/