Setting the value of select dropdown using angular and selectboxit

Question

I am using the jquery plugin "selectboxit" for my dropdown. Below is the html code with the angular directive "image-select-box" that initializes the select drop down to selectboxit.

<select ng-model="line" class="form-control" id="line" value="line"  image-select-box >
   <option value="0" data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAWUlEQVRYR+3WwQkAIRAEQc0/aAVfghmUfRn0lAs3Rx+9wKTrihsB448g4IDxBfC8LjhgfAE8777ghbf+lndsA3bZH2A39eOyfrJw/IADxhfA87rggPEF8LwNEroCEIoaIokAAAAASUVORK5CYII="></option>
   <option value="1" ng-selected='{{line == "1"}}' data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAc0lEQVRYR+2VSQ4AIAwC2/8/Wq9q4g0NIeMDsDBdunjRCXS0O8wVgMObAMAADk8g3B4TDODwBMLtrRM8xF7P7YD+HvCXfAB87+ovAJbvnwwAN1i8ttzkAOxGRFwPgMWBuskB2I2IuB4AiwN1kwOwGxFxPRP1UgoQsxww9AAAAABJRU5ErkJggg=="></option>
   <option value="2" data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAcElEQVRYR+2WQQ4AEBAD+f+jSZyExG1bacYDVGeW6I0VTaBHt6NcQ3D4ECAYweEEwutxgxEcTiC83n6Dx+ddz9eG876FLV4Irptq90BeguuqsrONAJ8sG3pNMII1nG0pCLah1wQjWMPZloJgG3pN8AQkBgYQvlQpRwAAAABJRU5ErkJggg=="></option>
   <option value="3" data-iconurl="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAHgAAAAPCAYAAAAvQwurAAAAZklEQVRYR+2XuxUAIAjEYP+htdDCzwSEWFqZi4fPDBc6gUTTCRcKhl8CBSsYngAczwYrGJ4AHO9s8Nisb6vdX8GUzEHB8f0kSoo8BtF1ft/gRiMajtoTzwbDvStYwfAE4Hg2GC54AkdIKBCb7coGAAAAAElFTkSuQmCC"></option>

The content of the link function in directive is as follows

var $targetSelects = $(element),
      selectConfig = {
      autoWidth: false
};
$targetSelects.selectBoxIt(selectConfig);
$targetSelects.selectBoxIt('refresh');

The issue that I am having is that the selected value is not getting updated using ng-select.

If I hardcode selected ="selected" at any of the options, it shows the selected value properly. However, if I use ng-selected to set the selected attribute I notice that during the link function, all the ng-selected attributes compute to false and that's why selectboxit, doesn't show the actual selected option. However, after the page has loaded, I see that ng-selected has added the selected attribute to the proper option element.

This essentially means that the custom attribute is getting compiled and linked before the ng-selected attribute has compiled and linked.

I have set the priority of the custom attribute to 1000 but still am unable to get it work.

Any help will be appreciated.

Setting the value of select dropdown using angular and selectboxit

0 Answers0