title: How to target a html element with a controller in Angular?
body: <p>I want to use the HTML5 audio element attributes (play/stop/pauze/...) in a controller in Angular. But I have multiple audio elements generated by a foreach loop so selecting by ID is not an option (except if I give id's based on the index of my foreach, wich doesn't seem the right way).</p>
  
  <p>My abbreviated html: </p>
  
  <pre><code>&lt;div ng-controller="LoopController"&gt;
      &lt;a ng-click="playLoop()"&gt;Play&lt;/a&gt;
      &lt;audio id="music" controls loop&gt;
          &lt;source src="songs/music1.mp3" type="audio/mpeg"&gt;
      &lt;/audio&gt;
  &lt;/div&gt;
  
  &lt;div ng-controller="LoopController"&gt;
      &lt;a ng-click="playLoop()"&gt;Play&lt;/a&gt;
      &lt;audio id="music" controls loop&gt;
          &lt;source src="songs/music2.mp3" type="audio/mpeg"&gt;
      &lt;/audio&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Angular controller : </p>
  
  <pre><code>gloopsApp.controller('LoopController', ['$scope', function($scope) {
      var music = document.getElementById('music');
      //here I want to target the audio element that is in this controller
  
      $scope.playLoop = function() {
          if (music.paused) {
              music.play();
          } else {
              music.pause();
          }
      };
  }]);
  </code></pre>