ui-select error "Can't interpolate: {{$select.getPlaceholder()}}"

Question

Here is the full error I get in angular ui-select

Error: [$interpolate:interr] Can't interpolate: {{$select.getPlaceholder()}} TypeError: Cannot read property 'length' of undefined

My markup is:

  <ui-select multiple ng-model="case.keywords" theme="bootstrap">
    <ui-select-match placeholder="Select keywords...">{{$item.name}}</ui-select-match>
    <ui-select-choices repeat="keywords in keywords | filter: $select.search">
      <div ng-bind-html="keyword.name | highlight: $select.search"></div>
    </ui-select-choices>
  </ui-select>
<p>Selected: {{case.keywords}}</p>

Nothing special in controller other than getting the array of keywords from db. Obviously ngSanitize and ui.select are included in the module dependencies.

The other issue I have is that choices are not visible. I am able to show the selected ones, but list of choices is not visible. I am using bootstrap theme, select.css is referenced. Here's what it looks like

enter image description here

Thank you for your help.

https://github.com/angular-ui/ui-select/wiki/ui-select this is the wiki of ui-select. It shows how `$select` is used. I simply took it from there — Sincere, Jan 31 '15 at 16:11
can you tell how and when "Keywords" is set ? and also case.keywords ? . im trying to understand the sequence. also , is keywords list greater than Case.Keywords ? if yes , you should see choices when you click UISelect ( but these choices will not show selected items ) — Sunil Vurity, Jan 31 '15 at 20:36
@SunilVurity `keywords` is a scope variable (array of objects) fetched from the database, I assign it in the controller. I use the Chrome add-on _ng-inspector for AngularJS_ to inspect the scope, it shows me that `keywords` array is the keywords table in the database (which is what I want). `case.keywords` is where the ***selected*** choices are saved. For testing I initialize it to two keywords: aaa and bbb as seen in the image above, but on production it will be initially empty. Thanks — Sincere, Feb 01 '15 at 02:04
Most likely issue could be , uiselect is getting the list as undefined and it's running repeater on it and hence length not defined. Can you try setting Keywords =[] on load , I guess this should resolve the error you see — Sunil Vurity, Feb 01 '15 at 03:28
@Sincere And the angular version? The reason I ask is that I have put off migrating from ui-select2 even though it is deprecated b/c of some bugs in ui-select. I believe some multiple selections with the bootstrap theme did not work correctly prior to version 1.2.18. — Fiver, Feb 01 '15 at 14:34

score 2 · Accepted Answer · edited May 23 '17 at 12:14

Questions from @SunilVurity and @Fiver gave me hints that lead me to resolve the issue:

First I changed keywordsto keyword in:

<ui-select-choices repeat="keywords in keywords | filter: $select.search">

Second in my controller I had:

appFactory.getKeywords().then(function (keywords){
  $scope.keywords = keywords;
  $scope.case = {};
  $scope.case.selectedKeywords = [];
});

Which I changed to:

$scope.case = {};
$scope.keywords = [];
learningCasesFactory.getKeywords().then(function (keywords){
  $scope.keywords = keywords;
  $scope.case.selectedKeywords = [];
});

As you can see in the controller, the get function is asynchronous which returns an undefined list to the view on load which caused the error I mentioned in the question. After updating the controller the error disappeared. This SO question helped AngularJS Interpolation Error.

Third the uiselect and angular versions can cause issues. My angular version is 1.2.9. This ui-select Github issue shows that upgrading the angular version solves the issue, I upgraded it to 1.3.11

Thanks @SunilVurity and @Fiver

Great !! Good to know I could help in someway – Sunil Vurity Feb 08 '15 at 19:29 — Sunil Vurity, Feb 08 '15 at 19:29

ui-select error "Can't interpolate: {{$select.getPlaceholder()}}"

1 Answers1