angular and faviconjs

HTML

<div ng-app="myApp">
  <div ng-controller="MainCtrl as main">
    <ul ng-repeat="message in main.messages">
      <li msg content=message ng-class="{message: message.read }">{{message.text}}</li>
    </ul>
  </div>
</div>

CSS

.message{
    color: red;
}

JavaScript

"use strict";

angular.module("myApp", []);

angular.module("myApp").directive("msg", ["$window", function($window){
    return {
        restrict: "A",
        scope: {
            content: "="
        },
        link: function(scope, element){
            angular.element($window).bind('scroll', function () {
                var elementY = element[0].offsetTop;
                var pageTop = this.pageYOffset;
                var pageBottom = this.pageYOffset + this.innerHeight - 50;
                if(elementY > pageTop && elementY < pageBottom){
                    scope.content.read = true;
                    scope.$apply();
                }
            });
        }
    }
}]);

angular.module("myApp").controller("MainCtrl", function(){
    this.messages = [];
    for(var i = 0; i < 100; i++){
        this.messages[i] = {
            text: "message" + i,
            read: false
        }
    }
});