JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://cdnjs.cloudflare.com/ajax/libs/angular.js/1.1.1/angular.min.js"></script>
<script src="http://cdnjs.cloudflare.com/ajax/libs/linq.js/2.2.0.2/linq.min.js"></script>
<div ng-app="sampleApp">
    <div id="status-service1">
        <div id="status-service1-monitor1" ng-init="init('service1', 'monitor1')" ng-controller="MonitorController">
            <span class="default">{{monitor.text}}</span>
        </div>
        <div id="status-service1-monitor2" ng-init="init('service1', 'monitor2')" ng-controller="MonitorController">
            <span class="default">{{monitor.text}}</span>
        </div>
    </div>
    <div id="status-service2">
        <div id="status-service2-monitor1" ng-init="init('service2', 'monitor1')" ng-controller="MonitorController">
            <span class="default">{{monitor.text}}</span>
        </div>
        <div id="status-service2-monitor2" ng-init="init('service2', 'monitor2')" ng-controller="MonitorController">
            <span class="default">{{monitor.text}}</span>
        </div>
    </div>
</div>

CSS

.default { color: blue; }
.success { color: green; }
.fail { color: red; }

JavaScript

var services = [
    {
        serviceId: "service1",
        monitors: [
            {
                monitorId: "monitor1",
                text: "s1 m1",
                success: true
            },{
                monitorId: "monitor2",
                text: "s1 m2",
                success: false
            }
        ]
    },{
        serviceId: "service2",
        monitors: [
            {
                monitorId: "monitor1",
                text: "s2 m1",
                success: false
            },{
                monitorId: "monitor2",
                text: "s2 m2",
                success: true
            }
        ]
    }
];

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

sampleApp.controller('MonitorController', function MonitorController($scope) {
    $scope.init = function (serviceId, monitorId){
        var service = Enumerable.From(services)
                                .Single("$.serviceId == '" + serviceId + "'");
        var monitor = Enumerable.From(service.monitors)
                                .Single("$.monitorId == '" + monitorId + "'");
        $scope.monitor = monitor;

        angular.element("span").removeClass("default");
        if (monitor.success){
            angular.element("#status-" + serviceId + "-" + monitorId + " span").addClass("success");
        } else {
            angular.element("#status-" + serviceId + "-" + monitorId + " span").addClass("fail");
        }
    }
});