JSFiddle - React, Tailwind, and code Playground

HTML

<div ng-app="myApp">
    <div ng-controller="Ctrl">
        <div class="user-panel" ng-repeat = "(id, user) in _users">
            Status: <span class="user-status{{user.status}}">{{getStatusInText(user.status)}}</span>
            <hr>
                <div class="toLeft">(<b>{{id}}</b>) {{user.name}}</div>
                <div class="toRight"><button ng-click="changeUserStatus(id, '1')">Change Status</button></div>
                <div class="clear"></div>
        </div>
    </div>    
</div>

CSS

.user-panel {margin:5px;padding:5px;border:1px solid #555;background-color:#dedede;font-size:14pt;font-family:arial;}

.user-status {color:#000000;}
.user-status0 {color:#bb0000;}
.user-status1 {color:#00bb00;}

.toLeft {float:left;}
.toRight {float:right;}
.clear {clear:both;}

JavaScript

var app = angular.module('myApp', []);

function Ctrl($scope) {
    $scope._users = {"123":{"name":"test","status":"0"}, "124":{"name":"test2", "status":"0"},"125":{"name":"test2", "status":"0"}};
    
    $scope.getStatusInText = function(status) {
        console.log("CALLED: " + status);
        return (status === "1") ? "online" : "offline";
    }
    
    $scope.changeUserStatus = function(uId, status) {
        console.log("Button Clicked.");
        $scope._users[uId].status = status;
    }
}