directive.js

.directive('newMessageAlert', function(){
        return function (scope, element, attrs) {
            scope.$watch(attrs.unreadMessageCount, function () {
                console.info("newMessageAlert", attrs);

                element.stop()
                  .addClass("unread", {duration: 500})
                  .removeClass("unread", {duration: 500})
                  .addClass("unread", {duration: 500})
                  .removeClass("unread", {duration: 500});
            });
        }
    });

inboxController.js

    $scope.testNewMessages = function(){
        console.info($scope.threads);
        angular.forEach($scope.threads, function(thread, index){
            $scope.threads[index].unreadMessageCount += 1;
        });
    };

threadList.html

<a ng-repeat="thread in threads"
           new-message-alert="threads[$index].unreadMessageCount"
           class="list-group-item thread"
           ng-class="{'pending': 'list-group-item-warning', 'active': 'active'}[threadStatus(threads[$index])]"
           ng-click="getThreadDetail(thread, $index);">
            <div>
                <span class="sender">{{ thread.sender }}</span>
                <span class="sent-time">{{ thread.created | date:'short':'UTC'}}</span>
            </div>
            <div>
                <span class="thread-subject">
                    <span class="thread-icon" ng-show="thread.icon_class">
                        <i class="fa fa-fw text-{{ thread.icon_color }} {{ thread.icon_class }}"></i>
                    </span>
                    {{ thread.subject }}
                </span>
                <span class="thread-subscriber-count pull-right">
                    <span class="badge badge-primary"><i class="fa fa-group"></i> {{ thread.subscribers.length }}</span>
                </span>
            </div>
        </a>