在AngularJS中使用Audio HTML5标记

Question

我正在尝试使用Angular JS中的ng-repeat创建多个音频HTML5元素。虽然音频元素（HTML5）正在渲染，而第一个播放（使用HTML5音频元素的控件），但其余部分禁用。请参见下图（音量控制全部禁用，音频文件也不播放）：

我使用以下代码：

HTML

...
          <md-card ng-repeat="item in audio.items">
            <md-card-content>
              <audio controls id="{{item.id}}">
                <source ng-src="{{item.link}}"></source>
              </audio>
              <button ng-click="playAudio(item.id)">Play</button>
              </md-card-content>
          </md-card>     
...

JS

...
$scope.audio = {
  items = [{id: "audio0", link: "static/audio/content1.mp3"},
    {id: "audio1", link: "static/audio/content2.mp3"}]
  };

$scope.playAudio = function(id) {
    var audio = document.getElementById(id);
    console.log(audio);
    audio.play();
 };
...