Bug fix preventing errors when using async resources

[tvervest]

If the select directive is supplied a resource promise (such as the $resource class from angular itself) a series of errors are occur when the library initialises. The following errors occur if the ui-select-choices directive is given a repeat expression using a $resource result;

Error: [$interpolate:interr] Can't interpolate: {{$select.getPlaceholder()}}
TypeError: Cannot read property 'length' of undefined
http://errors.angularjs.org/1.2.25/$interpolate/interr?p0=%7B%7B%24select.g…%7D&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined
    at http://localhost:3000/components/angular/angular.js:78:12
    at Object.$interpolate.fn (http://localhost:3000/components/angular/angular.js:8849:26)
    at Scope.$digest (http://localhost:3000/components/angular/angular.js:12532:40)
    at Scope.$apply (http://localhost:3000/components/angular/angular.js:12805:24)
    at done (http://localhost:3000/components/angular/angular.js:8378:45)
    at completeRequest (http://localhost:3000/components/angular/angular.js:8592:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/components/angular/angular.js:8531:11) angular.js:10071

TypeError: Cannot read property 'length' of undefined
    at http://localhost:3000/components/ui-select/dist/select.js:563:36
    at http://localhost:3000/components/angular/angular.js:17744:15
    at forEach (http://localhost:3000/components/angular/angular.js:325:18)
    at $setViewValue (http://localhost:3000/components/angular/angular.js:17743:5)
    at http://localhost:3000/components/ui-select/dist/select.js:702:21
    at Object.$watchCollectionAction [as fn] (http://localhost:3000/components/angular/angular.js:12409:13)
    at Scope.$digest (http://localhost:3000/components/angular/angular.js:12540:29)
    at Scope.$apply (http://localhost:3000/components/angular/angular.js:12805:24)
    at done (http://localhost:3000/components/angular/angular.js:8378:45)
    at completeRequest (http://localhost:3000/components/angular/angular.js:8592:7) angular.js:10071

Error: [$interpolate:interr] Can't interpolate: {{$select.getPlaceholder()}}
TypeError: Cannot read property 'length' of undefined
http://errors.angularjs.org/1.2.25/$interpolate/interr?p0=%7B%7B%24select.g…%7D&p1=TypeError%3A%20Cannot%20read%20property%20'length'%20of%20undefined
    at http://localhost:3000/components/angular/angular.js:78:12
    at Object.$interpolate.fn (http://localhost:3000/components/angular/angular.js:8849:26)
    at Scope.$digest (http://localhost:3000/components/angular/angular.js:12532:40)
    at Scope.$apply (http://localhost:3000/components/angular/angular.js:12805:24)
    at done (http://localhost:3000/components/angular/angular.js:8378:45)
    at completeRequest (http://localhost:3000/components/angular/angular.js:8592:7)
    at XMLHttpRequest.xhr.onreadystatechange (http://localhost:3000/components/angular/angular.js:8531:11) 

I've added some additional checks which prevent the uninitialised variables from being used, resolving the issue altogether :)

Note: my work is based on a fork of @juanpasolano's fork, so it also includes his patches in #198

[dimirc]

Can you rebase and remove /dist files?

[tannerlinsley]

Is this PR ready to merge? I run into this problem on a daily basis. It's very cumbersome.

[abimaelmartell]

is this fixed? I'm getting the same error using the result of a $resource

[justsml]

I'm getting the same issues, here's a simple example:
http://plnkr.co/edit/ZN2ypoNYshJfm6mJP7P0?p=preview
Related #519 #259 #380

[justsml]

Figured out the repeater error / 'Can't Interpolate bug'.
The html was nested wrong, fixed at: http://plnkr.co/edit/5nGBf9EsdZsPBCx1kdvI?p=preview
Hopefully helps someone else.

[hatpick]

@justsml Can you show where did you apply the fix?

[justsml]

@hatpick
It's real easy to make this mistake in JADE, only spotted it after carefully looking at the output.
Here's the BAD Code:

  <ui-select multiple ng-model="user.roleNames" theme="select2" style="min-width: 200px;">
    <ui-select-match placeholder="Select roles...">{{$item}}
        <ui-select-choices repeat="role in $root.roles">{{ role }}</ui-select-choices>
    </ui-select-match> 
<!-- ^^^ PROBLEM WAS SOMETHING LIKE THIS ^^^ -->
   </ui-select>

And now, fixed code:

  <ui-select multiple ng-model="user.roleNames" theme="select2" style="min-width: 200px;">
    <ui-select-match placeholder="Select roles...">{{$item}}</ui-select-match>
    <ui-select-choices repeat="role in $root.roles">{{ role }}</ui-select-choices>
  </ui-select>

In JADE

// BAD:
ui-select(multiple, ng-model='user.roleNames', theme='select2', style="max-width: 280px;")
    ui-select-match(placeholder='Select roles...') {{$item.roleName}}
        ui-select-choices(repeat='role in $root.roles') {{ role.roleName }}
// GOOD:
ui-select(multiple, ng-model='user.roleNames', theme='select2', style="max-width: 280px;")
    ui-select-match(placeholder='Select roles...') {{$item.roleName}}
    ui-select-choices(repeat='role in $root.roles') {{ role.roleName }}

[hatpick]

@justsml I did not have that issue with my html. Still having tons of errors in the console.

[MartinMuzatko]

I still get similar errors. The weird thing with dynamically loaded ui-select, is that it works after it has loaded once, but the first initiation, after clearing the cache fails.
Instead of the placeholder + the items, I just get {{$select.getplaceholder()}}

 Error: [ui.select:transcluded] http://errors.angularjs.org/1.4.0-beta.4/ui.select/transcluded?p0=Expected%201%20.ui-select-match%20but%20got%20'%7B0%7D'.&p1=0
    at http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular-ui-select.js:108:24
    at http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular-ui-select.js:1244:39
    at http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular.min.js:52:239
    at http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular.min.js:54:194
    at t (http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular.min.js:58:188)
    at link (http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular-ui-select.js:1232:25)
    at ba (http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular.min.js:71:151)
    at N (http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular.min.js:60:231)
    at http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular.min.js:67:193
    at http://localhost:8080/bo/BetLinux/web/assets/15080265/js/angular.min.js:116:425 <div class="{{field.name}} ui-select-container ui-select-multiple ui-select-bootstrap dropdown form-control ng-pristine ng-untouched ng-valid ng-scope" ng-class="{open: $select.open}" ng-model="field.permissions" theme="bootstrap">angular.min.js:105 (anonymous function)

The Url decoded means:

http://errors.angularjs.org/1.4.0-beta.4/ui.select/transcluded?p0=Expected 1 .ui-select-match but got '{0}'.&p1=0

Side note: doesn't work with any of the recent angular versions, 1.3.x - 1.4.x
The path to the angular resources are so long, because I use it together with Yii2, which is automatically publishing the assets to a subfolder