ng-repeat在模态中不起作用

Question

我有一个商店页面，用于在单击“更多详细信息”按钮时弹出模式，该按钮提供来自JSON文件的“名称”和“描述”。到目前为止，我只能获得JSON数组的第一项的名称和描述，无论我点击哪个按钮。 HTML看起来像这样：

<div ng-controller="myController" class="container-fluid">
    <div class="row clear-fix">
        <div ng-repeat="product in shop" class="col-md-4">
            <div class="panel-heading">
                <h1>{{product.name}}</h1>
            </div>

            <div class="panel-body">
                <div>
                    <img ng-repeat="image in product.images" ng-src='{{image.full}}' />
                </div>
                <h2>{{product.price | currency}}</h2>

                <button type="button" class="btn btn-success" data-toggle="modal" data-target="#exampleModal">More Details</button>

                <div class="modal fade" id="exampleModal">
                    <div class="modal-dialog" role="document">
                        <div class="modal-content">
                            <div class="modal-header">
                                <h5 class="modal-title">{{product.name}}</h5>
                                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                                    <span aria-hidden="true">&times;</span>
                                </button>
                            </div>
                            <div class="modal-body">
                                <p>{{product.description}}</p>
                            </div>
                            <div class="modal-footer">
                                <button type="button" class="btn btn-primary">Purchase</button>
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

        </div>
    </div>
</div>