Angular-数据更新后运行jQuery

Question

I'm using Angular 1.4.7. I didn't set up this site so I'm not sure what information I need to give for this. We're rendering some search filters, but whether or not they're enabled is configured by data retrieved from the server, for example:

$scope.searchFields = {
    "date": true,
    "price": true,
    ...
};

The HTML for a search field ( $scope.filter being an individual set of vars for this particular filter, in this case it's just selecting a maximum numeric value):

<div class="limit-group clearfix">
    <span class="detail">Filter Name:</span>
    <div class="filter-select-small">
        <select name="filter" class="custom-select" ng-if="searchFilters.code">
            <option value="">No Max</option>
            <option ng-repeat="(key, value) in filter" value="<%key%>"><%value%></option>
        </select>
        <span class="unavailable" ng-if="!searchFilters.code">Unavailable</span>
    </div>
</div>

There are conditions where the available search fields will change. The select fields, for whatever reason, get replaced by a jQuery plugin called selectbox. I have a function resetFilterStyles() which reattaches the jQuery plugin to the fields, but I'm not sure where to fire it.

Inside of methods defined on $scope the data is being updated using $http.get() but running resetFilterStyles() inside of these anonymous functions does not work, presumably because Angular hasn't processed yet that the data has been updated, so the changes that would be performed by resetFilterStyles() are undone by Angular's updates to the DOM.

I've tried setting a $watch handler but this seems to be the wrong place to run my function as it doesn't appear to take, either (and additionally causes grievous errors within Angular). As someone who doesn't use Angular, I'm not sure where to go from here.

Edit

The reset function:

function resetFilterStyles() {
    // desktop adv filters
    var filterContainer = $('.advance-filter-dropdown');
    $('select',filterContainer).selectbox('detach');
    $('select',filterContainer).selectbox('attach');
    $(".filter-select-small .sbOptions").niceScroll({cursorborder:"",cursorcolor:"#ccc",autohidemode: false});

    // mobile adv filters
    var filterContainer = $('.filter-wizard-mobile');
    $('select',filterContainer).selectbox('detach');
    $('select',filterContainer).selectbox('attach');
    $(".filter-select-small .sbOptions").niceScroll({cursorborder:"",cursorcolor:"#ccc",autohidemode: false});
}

Answer 1

From the AngularJS perspective, you shouldn't do DOM modifications inside the controller. You should create a directive/component to handle that for you.

But if you really must have that jQuery (legacy projects, for example), you can put your DOM modification into $timeout:

$http.get("url").then(function() {
        $timeout(function() {
          // updateDom
        }, 0);
});