data display issue after user selects data from ui-select dropdown

I am using ui-select for autocomplete multiselect & after i select the item from the dropdown it doesn't bind properly to the ui-select directive. Here is how it looks & the data shows as blue with no text in it...


Here is the HTML syntax

<ui-select multiple ng-model="ctrl.country.selected" theme="selectize" style="width: 900px;" title="Choose a country">
  <ui-select-match placeholder="Select or search a country in the list...">{{$select.selected.name}}</ui-select-match>
  <ui-select-choices multiselect repeat="country in ctrl.countries | filter: $select.search | limitTo: ($select.search.length <= 3)? 0 : undefined">
    <span ng-bind-html="country.name | highlight: $select.search"></span>
    <small ng-bind-html="country.code | highlight: $select.search"></small>
  </ui-select-choices>
</ui-select>

Select allOpen in new window

Here is the datasource

 

vm.country = {};
  vm.countries = [ // Taken from https://gist.github.com/unceus/6501985
    { name: 'Afghanistan', code: 'AF' },
    { name: 'Åland Islands', code: 'AX' },
    { name: 'Albania', code: 'AL' },
    { name: 'Algeria', code: 'DZ' },
    { name: 'American Samoa', code: 'AS' },
    { name: 'Andorra', code: 'AD' },
    { name: 'Angola', code: 'AO' },
    { name: 'Anguilla', code: 'AI' },
    { name: 'Antarctica', code: 'AQ' },
    { name: 'Antigua and Barbuda', code: 'AG' },
    { name: 'Argentina', code: 'AR' },
    { name: 'Armenia', code: 'AM' },
    { name: 'Aruba', code: 'AW' },
    { name: 'Australia', code: 'AU' },
    { name: 'Austria', code: 'AT' },
    { name: 'Azerbaijan', code: 'AZ' }
]

Select allOpen in new window

Also is there a way to sort data of the datasource in repeat attribute or some where??