<div ng-app="flagsApp">

<input name="country" class="inputWithCountryFlag">

OR

<input name="country2" input-with-country-flag="true">
  
</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 {
}

angular
  .module("flagsApp",[])
  .directive('inputWithCountryFlag',function(){
 return {
     template:'<span><input name="{{name}}" type="text" class="form-control" id="{{name}}" ng-model="name" placeholder="{{placeholder}}" autocomplete="off" ng-minlength="2" required><span class="cus-flag-country form-control-feedback" style="background-image: url({{imgPath + name + imgExtension }})"" ></span></span>',
     restrict: 'EAC',
     replace: true,
     scope:{
         name: '=name',
         placeholder: '=?',
         imgPath: '=?',
         imgExtension: '=?imgExt' // ? means optional
     },
     controller: function($scope, $element, $attrs){
         // default values
          $scope.imgPath = $scope.imgPath || "https://raw.githubusercontent.com/legacy-icons/famfamfam-flags/master/dist/png/";
          $scope.imgExtension = $scope.imgExtension || '.png';
          $scope.placeholder = $scope.placeholder || 'ie: us, uk... ';
     },
 
 }
})