title: How to do a jQuery play and stop toggle button in Angular?
body: <p>Recently I created this jQuery play and pause button (<a href="http://jsfiddle.net/jTh3v/338/" rel="nofollow">http://jsfiddle.net/jTh3v/338/</a>) which allows the user to toggle between play and pause when playing the music. I want to recreate this functionality but in AngularJS. However I'm very junior when it comes to Angular and struggled to do so. In the JSFiddle I hide the audio tag because I don't want the user to be able to see it, instead I just have 2 icons that allows them to play/pause the music. Could someone please help?</p>
  
  <p><strong>jQuery - toggles between the 2 icons and plays/pauses the song:</strong></p>
  
  <pre><code>$('#button_play').on('click', function() {
    $('#button_pause').show();
    $('#button_play').hide();
    $('#aud').trigger('play');
  });
  $('#button_pause').on('click', function() {
    $('#button_play').show();
    $('#button_pause').hide();
     $('#aud').trigger('pause');
  });
  </code></pre>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;div id="soundTag"&gt;&lt;/div&gt;&lt;br&gt;
  
    &lt;div&gt;
      &lt;button id="button_play" class="first" ng-click="" type="button"&gt;
        &lt;i class="glyphicon glyphicon-volume-up"&gt;&lt;/i&gt;&lt;/button&gt;
      &lt;button id="button_pause" class="second" ng-click="" type="button"&gt;
        &lt;i class="glyphicon glyphicon-volume-off"&gt;&lt;/i&gt;&lt;/button&gt;
    &lt;/div&gt;
  </code></pre>