JSFiddle - React, Tailwind, and code Playground

by Canet Robern

HTML

<div ng-app="MyApp">
	<div ng-controller="MyController">
		<select data-ng-init="searchOpt.selected=searchOpt.option[0].value" data-ng-model="searchOpt.selected">
			<option ng-repeat="opt in searchOpt.option" data-ng-model="opt.value" data-ng-value="opt.key">
				{{opt.value}}
			</option>
		</select>
	</div>
</div>

JavaScript

var myApp = angular.module('MyApp', []);
myApp.controller('MyController', function($scope, $q, HttpService){
	$scope.searchOpt = {};
	
	HttpService.getOptionList().then(function(response){
		console.log(response);
		$scope.searchOpt.option = response;
		$scope.searchOpt.selected = $scope.searchOpt.option[0].value;
	});
	
})
myApp.factory('HttpService', function($q, $timeout){

	var service = {};
	service.getOptionList = getOptionList;
	
	function getOptionList(){
		return $q(function(resolve, reject){
			$timeout(function(){
				resolve(OPTION);
			});
		});
	}
	
	return service;

});



var OPTION = [
	{key:'user_id', value:'ID'},
	{key:'user_name', value:'Name'},
	{key:'user_gender', value:'Gender'},
	{key:'user_phone', value:'Phone'},
	{key:'user_email', value:'Email'},
	{key:'user_birth', value:'Birthday'},
];