Using HTML5 audio tag in AngularJS

I am trying to have multiple HTML5 audio elements using ng-repeat in Angular JS. Although the audio elements (HTML5) are rendering and the former is played (using HTML5 audio element controls) and the rest are disabled . See image below (all volume controls go as disabled and no audio file plays either):

I am using the following code:

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();
 };
...