JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.4/angular.js"></script>
<body ng-app="myApp">
	<div ng-controller="TestController">

        <label for="vacation">
            <input type="checkbox" ng-model="settings.showVacation">
          Vacation
        </label> 
          
        <div class="progress" >
            <div ng-repeat="item in data" style="width: {{item.percentage}}%" class="progress-bar" ng-class="'timerange-' + item.showAs">
            </div>
        </div>	  
    </div>
</body>

CSS

.timerange-PADDING {
	background: transparent !important;
	border: 0px solid transparent !important;
}
.timerange-SERVICE {
	background: #f00 !important;
}
.timerange-VACATION {
	background: #0f0 !important;
}

JavaScript

angular.module('myApp', [])
	.controller('TestController', ['$scope', function($scope) {
	$scope.settings = {
        showVacation: true
    };
	
	$scope.$watch('settings.showVacation', function(newValue, oldValue) {
        $scope.data.forEach(function (item) {
            item.showAs = (item.containerType == "SERVICE" && newValue) ?
                'PADDING' : item.containerType;
        });
    });
        
	$scope.data = [{
        percentage: 34,
        containerType: "SERVICE"
    }, {
        percentage: 21,
        containerType: "PADDING"
    }, {
        percentage: 7,
        containerType: "VACATION"
    }];
		  
	$scope.switchViewType = function(viewType) {
		$scope.viewType = viewType;
	}
}]);