AngularJS - jquery plugin SelectBoxIt after ng-options finish populating select

Question

I'm populating a select box using AngularJS with the following code:

<select ng-model="department" 
        ng-options="dept as dept.name for dept in departmentList" 
        class="fancy">
    <option value="">-- select an option --</option>
</select>

But I need to render this SELECT box using the SelectBoxIt jquery plugin.

A hard-coded version of the SELECT works just fine as I have the initialization of SelectBoxIt at the bottom of the controller handling this section of the page:

$targetSelects.selectBoxIt({
            theme: "bootstrap"
            , downArrowIcon: "arrow"
            , showFirstOption: false
        });
        $targetSelects.on({
            "open" : onOpen
            , "close" : onClose
        });

I am now thinking that SelectBoxIt initialization is happening before the angular-populated SELECT box is finished populating.

Does this seem likely? If so, how might I solve this? I'm thinking this is probably a case of using a Deferred object, but am not sure where to inject this.

Any help would be appreciated.

Update

I re-implemented the plugin call as a directive. It does work. It initiates the drop-down as a SelectBoxIt select box, but it is still being done BEFORE angular has populated the dropdown using ng-options....

.directive('fancySelect', function() {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {

            var $targetSelects = $(element),
                selectConfig = {
                    theme: "bootstrap",
                    downArrowIcon: "arrow",
                    showFirstOption: false
                };

            function onOpen(event){
                $(this).data("selectBox-selectBoxIt").downArrow.addClass("drop-up");
                log('onOpen');
            }

            function onClose(event){
                $(this).data("selectBox-selectBoxIt").downArrow.removeClass("drop-up");
                log('onClose');
            }

            $targetSelects.selectBoxIt(selectConfig);
            $targetSelects.on({
                "open" : onOpen,
                "close" : onClose
            });
            $targetSelects.selectBoxIt('refresh');
        }
    };
});

Answer 1

If you weren't using Angular.js, you could use the populate option to add options to your SelectBoxIt dropdown: http://gregfranko.com/jquery.selectBoxIt.js/#PopulateOptions

Since you are using Angular, if there is some event that you can listen to once your select box is populated, then you could call the SelectBoxIt refresh() method to update your dropdown, like this:

    // Once your original select box is populated
    $('select').selectBoxIt('refresh');

Answer 2

One way of doing it is to watch the model and then fire an event on the next digest cycle.

scope.$watch(model, function() {
    scope.$evalAsync(function() {
        // event
    });
});

I've written this up properly here: Detect when ng-options has finished rendering .

Answer 3

I've solved part of the problem here, which may work for some, using $timeout in the directive. Whilst this, for me, solves the problem of the options being rendered, unfortunately, at the time of writing this, I can't get them to function!

.directive('fancySelect', function($timeout) {
return {
    restrict: 'A',
    link: function(scope, element, attrs) {
     $timeout(function() {
        var $targetSelects = $(element),
            selectConfig = {
                theme: "bootstrap",
                downArrowIcon: "arrow",
                showFirstOption: false
            };

        function onOpen(event){
            $(this).data("selectBox-selectBoxIt").downArrow.addClass("drop-up");
            log('onOpen');
        }

        function onClose(event){
            $(this).data("selectBox-selectBoxIt").downArrow.removeClass("drop-up");
            log('onClose');
        }

        $targetSelects.selectBoxIt(selectConfig);
        $targetSelects.on({
            "open" : onOpen,
            "close" : onClose
        });
        $targetSelects.selectBoxIt('refresh');
    }
  }, 0);
};

});