JSFiddle - React, Tailwind, and code Playground

HTML

<div data-ng-app data-ng-controller="myCtrl">
    <div data-ng-repeat="product in products">
        <h1>{{product.proName}}</h1>
        <div>
            <span class="size" data-ng-repeat="size in product.proHSize" data-ng-click="product.selectedSize = $index" data-ng-class="{selected: product.selectedSize == $index}">{{size}}</span>
        </div>
        <div>proPrice: {{product.proPrice[product.selectedSize]}}</div>
        <div>proSize: {{product.proSize[product.selectedSize]}}</div>
        <div>proSizePx: {{product.proSizePx[product.selectedSize]}}</div>
        <div>proHSize: {{product.proHSize[product.selectedSize]}}</div>
    </div>
</div>

CSS

.size{
    margin: 0 10px;
    cursor: pointer;
}
.selected{
    font-weight: bold;
    font-size:200%;
}

JavaScript

function myCtrl($scope) {
    $scope.products = [{
        proId: "1",
        proName: "อันแรก",
        proPrice: ["35", "57", "67"],
        proSize: ["3,5", "4,7", "7,10"],
        proSizePx: [
            ["30", "50"],
            ["40", "50"],
            ["70", "10"]
        ],
        proHSize: ["S", "M", "L"],
        selectedSize:"0",
        
    },

    {
        proId: "2",
        proName: "อันที่สอง",
        proPrice: ["35", "45"],
        proSize: ["3,5", "4,6"],
        proSizePx: [
            ["30", "50"],
            ["40", "50"]
        ],
        proHSize: ["S", "M"],
        selectedSize:"0",
    },

    {
        proId: "3",
        proName: "อันที่สาม",
        proPrice: ["35"],
        proSize: ["3,5"],
        proHSize: ["S"],
        proSizePx: [
            ["30", "50"],
            ["40", "50"]
        ],
        selectedSize:"0",
    }];
}