角。根据ID加载和更新模态内容

Question

我需要加载一个带有一堆vimeo iframe的图库。问题是，如果我尝试加载所有这些iframe，页面加载时间将无法忍受。所以首先我只是加载一个带有ng-repeat的画廊：

<ul data-ng-controller="WorksCtrl">
  <li data-ng-repeat="work in works">
    <a class="video" data-toggle='modal' data-target="#{{work.modalID}}">
      <img src="{{work.images[0]}}" alt=""/>
      <h2>{{work.title}}</h2>
    </a>
  </li>
</ul>

当用户点击链接时，它应该打开一个包含相关内容的模式，如下所示：

<div class="modal fade" id="{{work.modalID}}">
  <div class="modal-body">
    {{work.html_url}}
  </div>
</div>

我的JSON文件看起来像这样：

[
{
    "id":1,
    "modalID":"video1",
    "title": "Video One",
    "images": [
        "images/video_1.jpg"
    ],
    "html_url": "<iframe src='//player.vimeo.com/video/somevideolink1'></iframe>"
},
{
    "id":2,
    "modalID":"video2",
    "title": "Video Two",
    "images": [
        "images/video_2.jpg"
    ],
    "html_url": "<iframe src='//player.vimeo.com/video/somevideolink2'></iframe>"
}
]

如何设置ng-click，以便打开包含相关数据的模态？因此，当我点击链接时，它应该将iframe的相关ID和html_url放入模态。