JSFiddle - React, Tailwind, and code Playground

by munmun

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
<div ng-app="exampleapp">
    <div ng-controller="DisplayController">
      <label for="country" class="col-sm-3 control-label" id="country_label">Country list</label>
           <div class="col-sm-9 country">
              <select name="country" id="country" ng-model="country" class="selectpicker form-control country-code select-padding" ng-options="countryObj.id  as countryObj.name for  countryObj in countryList" ng-init = "country = countryList[0].id"></select>
           </div>
   </div>
    <hr/>
    <div ng-controller="AddController">
      <label for="country" class="col-sm-3 control-label" id="country_label">Add Country</label>
           <div class="col-sm-9 country">
           <input type="text" ng-model="country">
              <select name="country" id="country" ng-model="country" class="selectpicker form-control country-code select-padding" ng-options="countryObj.id  as countryObj.description for  countryObj in countryList" ng-init = "country = countryList[0].id"></select>
           </div>
   </div>
</div>

JavaScript

var exampleapp = angular.module("exampleapp", []);
    exampleapp.service('exampleService', function () {
    var chooseCountries=[
        {id : 1, name : "US", description: "United States" },
        {id : 2, name : "CA", description: "Canada"},
        {id : 3, name : "AL", description: "Albania"}
    ];
    return chooseCountries; 
    });
   
function DisplayController($scope, exampleService) {
		$scope.countryList = exampleService;
}
    
function AddController($scope, exampleService) {
    $scope.countryList = exampleService;
}