FAQs

Common Issues

ng-model not working with a simple variable on $scope

You cannot write:

<ui-select ng-model="item"> <!-- Wrong -->
  [...]
</ui-select>

You need to write:

<ui-select ng-model="item.selected"> <!-- Correct -->
  [...]
</ui-select>

Or:

<ui-select ng-model="$parent.item"> <!-- Hack -->
  [...]
</ui-select>

For more explanations, check ui-select #18 and angular.js #6199.

ng-bind-html gives me "Error: [$sce:unsafe] Attempting to use an unsafe value in a safe context"

You need to use module ngSanitize (recommended) or $sce:

$scope.trustAsHtml = function(value) {
  return $sce.trustAsHtml(value);
};

<div ng-bind-html="trustAsHtml((item | highlight: $select.search))"></div>

I get "TypeError: Object [...] has no method 'indexOf' at htmlParser"

You are using ng-bind-html with a number:

<div ng-bind-html="person.age | highlight: $select.search"></div>

You should write instead:

<div ng-bind-html="''+person.age | highlight: $select.search"></div>

Or:

<div ng-bind-html="person.age.toString() | highlight: $select.search"></div>

Or:

<div ng-bind-html="String(person.age) | highlight: $select.search"></div>

How do I stop the drop-down from getting cut off by the bottom of my Bootstrap modal / container with overflow: hidden?

Add append-to-body="true" to the ui-select tag. See the ui-select directive wiki page.

Filter highlighter ruin words in some languages such as Persian and arabic

You can use zwjHighlighter from following url: https://github.com/deadmann/AngularJSComponent It provided for persian language, and you may need to add your own language letters (only those who should stick to next letter) to the list of regex. ''' function isZeroWidthJoiner(first, second){ //Get First Character and match Whitespaces if(second.substr(0,1).match(/\s+/)) return false;

//TODO: MODIFY HERE
return !!first.substr(first.length>0?first.length-1:0).match(/[يئبپتجچحخسشصضطظعغفقکگلمنهی]/);

} '''