<div ng-app="">


<input name="country" type="text" class="form-control" id="country" ng-model="country" placeholder="ie: us, uk... " autocomplete="off" ng-minlength="2" required>

<span class="cus-flag-country form-control-feedback" style='background-image: url("https://raw.githubusercontent.com/legacy-icons/famfamfam-flags/master/dist/png/{{country |lowercase}}.png");'></span>

  
</div>
[class^="cus-flag-"],
[class*=" cus-flag-"] {
 display: inline-block;
 width: 30px;
 height: 25px;
 *margin-right: .1em;
 line-height: 25px;
 vertical-align: text-top;
 background-position: 0px 5px;
 background-repeat: no-repeat;
}

[class^="cus-flag-"]:last-child,
[class*=" cus-flag-"]:last-child {
 margin-left: -25px;
} 
.cus-flag-country {
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.8/angular.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/angular-ui-bootstrap/2.5.0/ui-bootstrap-tpls.min.js