如何在angular中绑定一个带有HTML <p>标签的字典？

Question

因此，我对angularJS一无所知，也没有找到任何好的解释来说明如何将字典与<p>标记绑定在一起，从而使字典中的每一次更改都会导致html标记中的数字发生变化。例如，如果我在一个数组中有多个字典(每个玩家一个字典)

var players = [{bambu:0, clouds:0, fruits:0}, {bambu:0, clouds:0, fruits:0} , {bambu:0, clouds:0, fruits:0}]

我想在<p>标签中显示与bambu相关的号码

<p id="player_0_bambu" class="number_of_cards"> </p>

我想像angular一样动态地改变它。

我试着做一个

while (true){
    for (var r=0; r< num_players;r++){
        for (var c=0; c< colores.length;c++){
            $("#player_"+r+"_"+colores[c]).html(players[r][colores[c]])

        }
    }
}

但是，一段时间后，javascript就会崩溃，所以我转向了angular，但我发现它很难理解。

谢谢你的帮助!