angular js audio issue in mobile browsers and iPad

I need to pause the audio when a browser window is minimized and also resume it when a browser window is maximized. my code is working fine desktop browsers. anyone plz help me

var app=angular.module("myApp",['ngAudio']);
    app.controller("myCtrl",function($scope,ngAudio,$document)
    {
        $scope.src="aud.mp3";
        $scope.play=false;
        $scope.play=function()
        {
            $scope.audio = ngAudio.load('aud.mp3');
            $scope.audio.play();
        }
        $scope.stop=function()
        {
            $scope.audio = ngAudio.load('aud.mp3');
            $scope.audio.pause();
        }
         $document[0].addEventListener("visibilitychange", function() {
        var doucmentHidden = document.hidden;
        if (doucmentHidden)
            $scope.audio.pause();
        else
            $scope.audio.play();
        }, false);
    });