JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
<!DOCTYPE html>
<html>
<head>
    <title>Hello World, AngularJS - ViralPatel.net</title>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>
    <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://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
	<script>
		var myApp = angular.module('myApp', []);
		
		myApp.controller('GreetingController', ['$scope', function($scope) {
          $scope.showVacation = true;  
        
		  var arrayFunction1 = [];
		  var containedObject1 = {
				percentage: 34,
				containerType: "SERVICE"
				};
		  var containedObject2 = {
				percentage: 21,
				containerType: "PADDING"
				};
          var containedObject3 = {
				percentage: 7,
				containerType: "VACATION"
				};
		 arrayFunction1.push(containedObject1);
		 arrayFunction1.push(containedObject2);
         arrayFunction1.push(containedObject3);
		  
		  $scope.function1 = function() {		
			return arrayFunction1;
		  };
		  
		  $scope.switchViewType = function(viewType) {
			$scope.viewType = viewType;
		  }
		}]);
	</script>
</head>
<body ng-app="myApp">

	<div ng-controller="GreetingController">
	 
      <br />
      <br />
        
	  <label for="vacation">
          <input type="checkbox" name="vacation" value="VACATION" ng-model="showVacation" checked="checked">
          Vacation
      </label> 
          
        <br />
      <br />
        
      <div class="progress" ng-repeat="itemouter in function1()">
            <div ng-repeat="item in function1()" style="width: {{item.percentage}}%" ng-class="showVacation == true ? 'progress-bar timerange-{{item.containerType}}' : 'progress-bar timerange-PADDING'">
            </div>
	  </div>	...

CSS

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