angularjs - Typehead displays wrong on certain input -

i using uitypehead input selection.

it works except simple fact. inputs have form like

{name: "las vegas mccarran international (las)<span class="country">united states</span>", iata: "las"} 

so insert <span class="country">...</span> backend string.

when type in "veg" input field, that's fine.

however, when typing in "las" instead, following happens:

what happens is, system assumes "class" part of desired string following in view:

<span c<strong="">lass="country"&gt;united states</span> 

basically, recognizes "las" string , puts strong part not displayed correctly.

my view, service , controller follows:

service:

angular.module('tripdeltaapp').service('airportservice',['$http',function($http){     this.airport = function (entry) {       return $http({         method: 'post',         url: '/airport',         data: {'search': entry}       }).then(function (response) {         return response.data.map(function (item) {           //console.log(item);           return item;         });         });     }; }]); 

controller:

 $scope.onselect = function ($item, $model, $label,to,index) {     $model = urlparser.cleanairport($model);     if(to && $scope.flightarray[index+1] && !$scope.flightarray[index+1].from) {       $scope.flightarray[index+1].from = $model;     }   }; 

and view:

 <input type="text"                                ng-focus="inputfocus=false"                                ng-blur="inputfocus=true"                                ng-model="flight.to"                                placeholder="{{'to'|translate}}"                                name="arrivalairport"                                typeahead="data data.name data in getairport($viewvalue)"                                class="form-control"                                typeahead-editable="false"                                typeahead-on-select="onselect($item, $model, $label,1,$index)"                                autocomplete="off"                                select-on-click                                required> 

any idea how solve that?

i think best bet use custom template, described in typeahead example flags, instead of putting markup data.

you'd change data this:

{name: "las vegas mccarran international (las)", country: "united states", iata: "las"} 

and use template this:

<script type="text/ng-template" id="customtemplate.html">    <div>       {{match.model.name}}       <span class="country">{{match.model.country}}</span>    </div> </script> 

update if can't change data on backend, preprocess data gets loaded javascript:

var re = new regexp('^([^<]+)<span class="country">([^<]+)<\/span>');  angular.module('tripdeltaapp').service('airportservice',['$http',function($http){     this.airport = function (entry) {       return $http({         method: 'post',         url: '/airport',         data: {'search': entry}       }).then(function (response) {         return response.data.map(function (item) {           //console.log(item);           var matches = item.name.match(re);           item.name = matches[1];           item.country = matches[2];           return item;         });       });     }; }]); 

the regular expression may need tweaking, based on specific data have. if airport "name" fields have "<", cause trouble. may need mess spacing, location of quotes, etc.