JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.4/angular.min.js"></script>
<body>

<div ng-app="myApp" ng-controller="myCtrl">
    <span ng-bind="getAnyValue()"></span>
</div>

<script>
var app = angular.module('myApp', []);
app.controller('myCtrl', function($scope) {

	//the 3 variables
    $scope.foo = null;
    $scope.bar = 'bar has value';    
    $scope.baz = null;        
    
    //method checking who has value and return the first variable who got value
    $scope.getAnyValue = function(){
    
    	var spanValue = 'all three are null'; //set value if all 3 variables are null
        
      //just change the condition instead of != null
      //to if your template is equal to any of these 3 variables
    	if($scope.foo != null){
        	spanValue = $scope.foo;
        }
        else if($scope.bar != null){
        	spanValue = $scope.bar;
        }
        else if($scope.baz != null){
        	spanValue = $scope.baz;
        }
        
        return spanValue;
    }
});
</script>

</body>
</html>