angular and faviconjs

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.min.js"></script>
<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){
            
            function reading(){
                  if (scope.content.read) { return; }
                  var elementY = element[0].offsetTop;
                    var pageTop = $window.pageYOffset;
                    var pageBottom = $window.pageYOffset + $window.innerHeight - 50;
                    if(elementY > pageTop && elementY < pageBottom){
                        scope.content.read = true;
                        scope.$apply();
                    }
            };
            angular.element($window).bind('scroll', reading);
        }
    }
}]);

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