Currently, I am utilizing the selectric jQuery plugin in conjunction with my Angular dropdown.
When I have the dropdown options hardcoded in the HTML, everything functions correctly with just the following code:
$('select, .select').selectric();
However, if I dynamically load my dropdown data like this:
<select class="form-control" ng-model="myAddress" ng-options="address.addressLines for address in search.result.addresses" size="{{numAddressOptions}}">
</select>
An error is triggered in the selectric plugin:
TypeError: $li[index] is undefined
I attempted to incorporate the selectric plugin as a directive in the following way:
<select class="form-control" ng-model="myAddress" ng-options="address.addressLines for address in search.result.addresses" size="{{numAddressOptions}}" selectric>
</select>
Additionally, here is my directive:
.directive('selectric', function(){
'use strict';
return{
restrict: 'AE',
link: function(scope, element, attrs) {
$(element).selectric();
}
};
});
Does anyone have any insights on what may be causing the issue here?