JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.angularjs.org/1.2.13/angular.min.js"></script>
<div ng-app="test">
    <div data-ng-controller="MyController">
<span class="badge badge-alert">{{ totalActivities() |json}}</span>

        <table>
            <tr ng-repeat="activity in activities" ng-class="{ 'activity-read': activity.seen == 1 }">
                <td>{{activity.name}}</td>
                <td>
                    <button class="btn btn-default" ng-click="updateActivity(activity)"><span>@{{ 0 == activity.seen ? 'Mark Read' : 'Mark Unread' }}</span>
                    </button>
                </td>
            </tr>
        </table>
    </div>
</div>

JavaScript

var Activity = function($scope, $timeout) {
    console.log('creating controller');
    
    var fakeData = [{
        name: 'One',
        seen: 0
    }, {
        name: 'Two',
        seen: 0
    }, {
        name: 'Three',
        seen: 1
    }, {
        name: 'Four',
        seen: 0
    }];

    $timeout(function () {
        $scope.activities = fakeData;
        console.log('data returned');
    }, 500);

    $scope.totalActivities = function () {
        var count = 0;

        angular.forEach($scope.activities, function (activity) {
            count += activity.seen === 0 ? 1 : 0;
        });

        return count;
    };

    $scope.updateActivity = function (activity) {
        activity.seen = activity.seen === 0 ? 1 : 0;

        var payload = {
            method: 'PUT',
            url: '/activity/' + activity.id,
            data: {
                seen: activity.seen
            }
        };

        $timeout(function () {
            console.log(payload);
        }, 200);
    };
};

angular.module("test", [])
    .controller("MyController", ['$scope','$timeout', Activity]);