ng-if dependent element not disappearing - angularjs

Question

I've got the following problem:
When clicking a button my searchResults window opens due to 'displayResults' is set on 'true'. But when clicking on the close button it's not closed even if $scope.displayResults is set to false again.
html
<section id="searchResults" data-ng-if="displayResults">
<h2>Suchergebnisse:</h2>
<div id="closeMenuS">❌</div>
<ul data-ng-repeat="x in sItems">
....
</ul>
</section>
AngularJS
$http({
method : "POST",
url : "/searchFor",
data: {item: sI, dID: searchID}
}).then(function(response){
if(response.data.length > 0 || response.data != 'undefined'){
$("#sidebar").css({pointerEvents: "none"});
$("#default").css({pointerEvents: "none"});
$scope.displayResults = true;
$scope.sItems = [];
for(let i = 0; i < response.data.length; i++){
$scope.sItems[i] = response.data[i];
}
window.setTimeout(function(){
$("#closeMenuS").click(function(){
$scope.displayResults = false;
$("#sidebar").css({pointerEvents: "auto"});
$("#default").css({pointerEvents: "auto"});
});
}, 30);
}
}, function myError(response) {
$scope.myWelcome = response.statusText;
});

Answer 1

If you're in a callback in a jQuery listener, you need to explicitly apply the change. Try this:
window.setTimeout(function(){
$("#closeMenuS").click(function(){
$scope.displayResults = false;
$scope.$apply();
$("#sidebar").css({pointerEvents: "auto"});
$("#default").css({pointerEvents: "auto"});
});
}, 30);

Answer 2

AngularJs has its own implementation for timeouts. By using the native setTimeout() you are hiding what you are trying to do from angular.
The result is that AngularJs has no idea that your $scope changed.
The correct way would be to inject the $timeout service and replace your setTimeout() call with $timeout (I stripped down the rest of the code for simplification):
angular.module("YourModule")
.controller("YourController", ["$scope", "$timeout", YourController]);
function YourController($scope, $timeout)
{
...
$scope.doSomeMagic = function()
{
$timeout(function()
{
$("#closeMenuS").click(function()
{
$scope.displayResults = false;
$("#sidebar").css({pointerEvents: "auto"});
$("#default").css({pointerEvents: "auto"});
});
}, 30);
}
...
}
This is why the $apply() function suggested by Itamar works. You're basically forcing AngularJs to detect changes.
However, the better practice is to use the tools provided by AngularJs and avoid native javascript when possible.