<div ng-app="flagsApp">

<div>
  This input uses the static value provided ('us'):
  <input-with-country-flag country-value-from="'us'">
</div>

<br>
  
<div>
  This input dynamically uses the value from the country input field:
  <input-with-country-flag country-value-from="country">
</div>  
<div>
      ... but does not work
</div>
  
</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:'<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/{{countryValueFrom}}.png);">{{countryValueFrom}}</span>',
     restrict: 'E',
     scope:{
         countryValueFrom: '='
     }
 }
})