Not able to get 'Play/Pause' control to work with Angular

I am trying to get a play/stop button to function correctly with Angular, but some reason I am not able to get this thing working correctly.

There is a play/pause control on two views, and I need them to be in the correct state if the audio is paused or playing.

I have a plunker created here http://ift.tt/1zI6n9L

My Directive

.directive('radioControl', function(musicPlayer) {
return {
    restrict: 'A',
      template:'<button ng-click="musicPlayer.pause();">stop</button>
                <button ng-click="musicPlayer.play();">play</button>',
       link: function($scope, $element, attrs) {
       $scope.musicPlayer = musicPlayer;
        console.log(musicPlayer);
        // var playButton = $element[0].querySelector('.playplay')
        // var stopButton = $element[0].querySelector('.stopstop')

        // console.log(playButton);
        // console.log(stopButton);

        // currently playing
        musicPlayer.audioPlayerConfig.myaudio.addEventListener('playing', function() {
            musicPlayer.isPlaying = true;
            console.log('it is currently playing');
            $scope.areaStatus = true;
        }, false);
        // loading 
        musicPlayer.audioPlayerConfig.myaudio.addEventListener('waiting', function() {
            console.log('loading...');
        }, false);
        // player has ended
        musicPlayer.audioPlayerConfig.myaudio.addEventListener("error", function() {
            console.log('myaudio ERROR');
            alert('something happened!!');
            musicPlayer.pause();
        }, false);

    }
}
})

My Service

.service('musicPlayer', function() {

this.progressTimer;
this.playButton;
this.stopButton;
this.activityIndicator;
this.textPosition;
var self = this;
var mymy = document.getElementsByClassName('playplay');

this.audioPlayerConfig = {
    myaudioURL : 'http://ift.tt/1rK3Iic',
    myaudio : new Audio('http://ift.tt/1rK3Iic'),
    isPlaying : false,
    readyStateInterval : null,
    play : self.play,
    pause : self.pause
}
this.play = function(){
    console.log('playing');
    self.audioPlayerConfig.myaudio.play();
}
this.pause = function() {
    console.log('music stopped');
    self.audioPlayerConfig.myaudio.pause();
}
});

My Controller

.controller('MainCtrl', function($scope, $ionicSideMenuDelegate, $ionicPlatform, $http,       $interval, $timeout, musicPlayer) {


// $scope.blahblah = musicPlayer.sayHello('blah');
$ionicPlatform.ready(function() {
    musicPlayer.play();



})

})

 .controller('aboutCtrl', function($scope, musicPlayer) {

console.log(musicPlayer.isPlaying);
if (musicPlayer.isPlaying){
    $scope.areaStatus = true;
}

})

The code is not very clean, sorry about this, but wondering if someone can send me in the right direction.