I have scroll event and always when i am scrolling change detection is running in background

So because of that i tried to optimzie my scrolling with debouncing

The idea is: while i am scrolling initially i put my code in runOutsideAngular which will not trigger the changed detection BUT after that intervall in the deboucincing is passed i want to runIn angular zone - but it is not happening - my number is not updated in the UI

HTML

<h1>{{ number }}</h1>



<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>
<h1>sdsdsd</h1>

<h1>sdsdsd</h1>

APP COMPONENT TS

constructor(public ngZone: NgZone) {};

  codeToExecute() {
    this.ngZone.run(() => {
      this.changeSomethingToUI();
    })
  }

  ngOnInit() {
      const processChange = this.debounce(this.codeToExecute.bind(this), 1000);

      this.ngZone.runOutsideAngular(() => {
        window.addEventListener('scroll', processChange)
      })
  
  }

  debounce(fn, delay = 300){
    let timer;
    const that = this;
    return function() {
      clearTimeout(timer);
      timer = setTimeout(() => {
        fn();
      }, delay)
    }
  }

  number = 5;
  changeSomethingToUI() {
    this.number = 15;
  }

  ngAfterViewChecked() {
    console.log('Change detection triggered!');
  }

why after i stop scrolling in 1000ms i don't get my number updated to 15 ?