Async data tons of errors in console

[hatpick]

Hi,

I'm trying to load async data and then group by them and I get tons of error in the console which leads to group by not working sometimes:

<ui-select multiple ng-model="current.ids" name="userPlans" theme="select2" ng-disabled="disabled" class="med">
  <ui-select-match>{{$item.name}}</ui-select-match>
  <ui-select-choices group-by="getCityName" repeat="person.id as person in peopleList | propsFilter: {name: $select.search}">
    <div ng-bind-html="person.name | highlight: $select.search"></div>
                    {{person.name}}
  </ui-select-choices>
</ui-select>

$scope.getCityName = function(item) {
  return $scope.cities[item.cityId].name;
}

and errors are these:

TypeError: Cannot read property 'length' of undefined
    at angular.module.constant.service.service.controller.p.getPlaceholder (http://localhost:4000/lib/ui-select/select.min.js:7:6353)
    at cb.functionCall (http://localhost:4000/lib/angularjs/angular.min.js:196:254)
    at Object.<anonymous> (http://localhost:4000/lib/angularjs/angular.min.js:105:217)
    at h.$get.h.$digest (http://localhost:4000/lib/angularjs/angular.min.js:120:246)
    at h.$get.h.$apply (http://localhost:4000/lib/angularjs/angular.min.js:123:334)
    at n (http://localhost:4000/lib/angularjs/angular.min.js:80:80)
    at O (http://localhost:4000/lib/angularjs/angular.min.js:84:150)
    at XMLHttpRequest.D.onload (http://localhost:4000/lib/angularjs/angular.min.js:85:169) 

and

TypeError: Cannot read property 'indexOf' of undefined
    at http://localhost:4000/lib/ui-select/select.min.js:7:4860
    at Array.filter (native)
    at http://localhost:4000/lib/ui-select/select.min.js:7:4824
    at Object.fn (http://localhost:4000/lib/angularjs/angular.min.js:119:304)
    at h.$get.h.$digest (http://localhost:4000/lib/angularjs/angular.min.js:120:381)
    at h.$get.h.$apply (http://localhost:4000/lib/angularjs/angular.min.js:123:334)
    at n (http://localhost:4000/lib/angularjs/angular.min.js:80:80)
    at O (http://localhost:4000/lib/angularjs/angular.min.js:84:150)
    at XMLHttpRequest.D.onload (http://localhost:4000/lib/angularjs/angular.min.js:85:169) 

and

TypeError: Cannot read property 'length' of undefined
    at Array.<anonymous> (http://localhost:4000/lib/ui-select/select.min.js:7:7922)
    at Vf.$$parseAndValidate (http://localhost:4000/lib/angularjs/angular.min.js:214:437)
    at Vf.$commitViewValue (http://localhost:4000/lib/angularjs/angular.min.js:214:272)
    at Vf.$$debounceViewValueCommit (http://localhost:4000/lib/angularjs/angular.min.js:216:191)
    at Vf.$setViewValue (http://localhost:4000/lib/angularjs/angular.min.js:215:442)
    at http://localhost:4000/lib/ui-select/select.min.js:7:10169
    at Object.fn (http://localhost:4000/lib/angularjs/angular.min.js:119:294)
    at h.$get.h.$digest (http://localhost:4000/lib/angularjs/angular.min.js:120:381)
    at h.$get.h.$apply (http://localhost:4000/lib/angularjs/angular.min.js:123:334)
    at n (http://localhost:4000/lib/angularjs/angular.min.js:80:80) 

and

TypeError: Cannot read property 'length' of undefined
    at http://localhost:4000/lib/ui-select/select.min.js:7:5018
    at Object.fn (http://localhost:4000/lib/angularjs/angular.min.js:119:294)
    at h.$get.h.$digest (http://localhost:4000/lib/angularjs/angular.min.js:120:381)
    at h.$get.h.$apply (http://localhost:4000/lib/angularjs/angular.min.js:123:334)
    at n (http://localhost:4000/lib/angularjs/angular.min.js:80:80)
    at O (http://localhost:4000/lib/angularjs/angular.min.js:84:150)
    at XMLHttpRequest.D.onload (http://localhost:4000/lib/angularjs/angular.min.js:85:169) 

apparently data is not ready when the directive is trying to access it.

[justsml]

I'm not using async data and I'm still getting this issue. See:
http://plnkr.co/edit/ZN2ypoNYshJfm6mJP7P0?p=preview
Related #519 #259 #380

[justsml]

@hatpick try adding a placeholder to your <ui-select-match>
Seeing the error is in the getPlaceholder code...

[schitupolu]

In my case i get the dropdown list async (as per the example in the module for multi-select), initially we need to define
$scope.people = [];
and then update people with data .i.e. $scope.people = data;
This should solve the issue
http://stackoverflow.com/questions/20432127/angularjs-interpolation-error

[hatpick]

@justsml I already have placeholder there and get all those errors in the console.

[justsml]

@hatpick Can you post the current HTML you're using... I was assuming based on the code you posted in November.

[hatpick]

@justsml It's the same except that has a placeholder attribute now, I simplified it here.

[GarPit]

+1

[FrancescoMussi]

Any solution has been found?

[itamar-Cohen]

@FrancescoMussi you need to add track by (unique ID/name) and if you use the " propsFilter : " like hatpick
change it to " filter: {} " ;

[nicklasb]

Hi, also affected here.
@itamar-Cohen, I don't completely understand your solution?

[itamar-Cohen]

Hi @nicklasb ,
play with this
http://plnkr.co/edit/wXnFaR?p=preview

[nicklasb]

Now I am even more confused, It doesn't work?

[itamar-Cohen]

Hi @nicklasb
confuse about what?
can u explain what u need to do?