Call function after DOM is updated by angular

Question

I have a function that toggle variable that show search panel and I need to call resize function when panel is visible to refresh ACE editor (the panel make editor smaller).

in html I have:

<div class="search-panel" ng-show="searchReplace">
    <button type="button" ng-click="search(false)" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
    <form name="searchForm">
        ...

and my search function look like this:

var prev_search;
$scope.search = function(toggle, replace) {
    var refresh = $scope.searchReplace != toggle;
    if (toggle) {
        if ($scope.searchReplace) {
            // next search
            if ($scope.selectedSearchText != prev_search) {
                // new search
            } else {
                // continue
            }
        } else {
            $scope.searchReplace = true;
            $scope.replaceMode = !!replace;
        }
    } else {
        $scope.searchReplace = false;
    }
    if (refresh) {
        editor.resize();
    }
};

I call that function in keydown event:

$(document.documentElement || window).keydown(function(e) {
    if (e.ctrlKey) {
        if (e.which == 82) { // CTRL+R
            $scope.$apply(function() {
                $scope.search(true, true);
            });
        } else if (e.which == 81) { // CTRL+Q to test resize - it's working
            editor.resize();
        } else if (e.which == 70) { // CTRL+F
            $scope.$apply(function() {
                $scope.search(true);
            });
            e.preventDefault();
        }
    }
});

Answer 1

I ended up using jQuery show/hide and call resize after.