Quando um usuário rola a janela do navegador abaixo de um determinado ponto, estou alternando a classe da #page div.

O que eu fiz até agora funciona bem:

http://jsfiddle.net/eTTZj/29/

<div ng-app="myApp" scroll id="page">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) {
                 element.addClass('min');
                 console.log('Scrolled below header.');
             } else {
                 element.removeClass('min');
                 console.log('Header is in view.');
             }
        });
    };
});

(quando eles rolam a janela abaixo do cabeçalho, 100px, a classe é alternada)

Embora, me corrija se eu estiver errado, sinto que esta não é a maneira correta de fazer isso com o Angular.

Em vez disso, presumi que o melhor método para fazer isso seria usando ng-class e armazenando um valor booleano no escopo. Algo assim:

<div ng-app="myApp" scroll id="page" ng-class="{min: boolChangeClass}">

    <header></header>
    <section></section>

</div>

app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
    return function(scope, element, attrs) {
        angular.element($window).bind("scroll", function() {
             if (this.pageYOffset >= 100) {
                 scope.boolChangeClass = true;
                 console.log('Scrolled below header.');
             } else {
                 scope.boolChangeClass = false;
                 console.log('Header is in view.');
             }
        });
    };
});

Embora isso não seja dinâmico, se eu alterar o valor de scope.boolChangeClass no retorno de chamada de rolagem, a classe ng não está atualizando.

Então, minha pergunta é: como é melhor alternar a classe de #page, usando o AngularJS, quando o usuário rola abaixo de um certo ponto?