title: Change a play button to pause in Angular and vice versa
body: <p>I'm trying to make a basic play-pause control using the Soundcloud streaming.</p>
  
  <p>I've got the part where you click the play button and the sound streams.</p>
  
  <pre><code>&lt;img class="media-object img-rounded img-responsive"  src="/images/play_button.png" alt="playbutton" height="40px" width="40px" ng-click="streamTrack(show.stream_url)"&gt;
  </code></pre>
  
  <p>The controller for that bit looks like this</p>
  
  <pre><code>$scope.streamTrack = function (stream_url) {
      console.log(stream_url);
      SC.stream(stream_url, function(sound){
      sound.play();
    });
  </code></pre>
  
  <p>When I click on the button, I want it to change to a pause button.  Then when you click the pause button, I'll set it up to fire sound.pause or sound.stop.</p>
  
  <p>What's the best way to change a button and corresponding click events in Angular?</p>
  
  <p><img src="https://i.stack.imgur.com/dDEgN.png" alt="Play">
  <img src="https://i.stack.imgur.com/7CwHp.gif" alt="Pause"></p>