javascript - ng-repeat with function inside -

i have product array below:

$scope.products = [   {proid:"1",    proname:"test",    proprice:["35","57","67"],    prosize:["3,5","4,7","7,10"],    prosizepx:[["30","50"],["40","50"],["70","10"]],    prohsize:["s","m","l"]   },    {proid:"2",    proname:"second",    proprice:["35","45"],    prosize:["3,5","4,6"],    prosizepx:[["30","50"],["40","50"]],    prohsize:["s","m"],   },   {proid:"3",   proname:"test",   proprice:"35",   prosize:"3,5",   prohsize:"s", } ]; 

how can display , know size active?

http://s9.postimg.org/50vtm5cpb/my_dream.gif

i have looked app not find one.

i'm not going style not relevant javascript / angular (the question's tags), here how achieve this:

store selected size's array index , use determine other items display. if "l" selected, index 2. proprize[2] represents price "l", prosize[2] measurement, prosizepx[2] w/e "l".

example: http://jsfiddle.net/thesharpieone/g9zq8/ (click on size each product, , information size populated)

everything done in template, controller contains products data.

here template work:

    <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>