Angularjs захватить аудио и загрузить файл

Я создаю веб-приложение, в котором вы можете записывать звук из браузера, а затем загружать его на сервер, чтобы другие пользователи могли его слушать, давать вам оценку, исправления - изучение языка.

У меня есть части кода, но я не могу понять, как их объединить:

JS (скрипт для записи звука - работает нормально, пропущена часть для кнопки записи и остановки):

navigator.mediaDevices.getUserMedia({audio:true})
.then(stream => {handlerFunction(stream)})

function handlerFunction(stream) {
    rec = new MediaRecorder(stream);
    rec.ondataavailable = e => {
        audioChunks.push(e.data);
        if (rec.state == "inactive") {

            let blob = new Blob(audioChunks, {type:'audio/mpeg-3'});
            recordedAudio.src = URL.createObjectURL(blob);
            recordedAudio.controls = true;

            var url = recordedAudio.src;
            var link = document.getElementById("download");
            link.href = url;
            link.download = 'audio.wav';
        }
    }
}

Часть HTML для создания элементов управления: запись, остановка, затем загрузка записанного аудио:

<button id = "record">Record</button>
<button id = "stopRecord">Stop</button>
<p> <audio id = "recordedAudio"></audio></p>
<div id = "recordings"><a id = "download"> Download</a></div>

Затем у меня есть средство выбора файла и директива AngularJS для загрузки файла - после вызова: doUploadFile () файл попадает в контроллер и загружается на сервер.

Загрузка работает нормально с выбором файла, но я не знаю, как объединить два фрагмента кода вместе.

<form>
    <input type = "file" file-model = "uploadedFile">
    <button type = "submit" ng-click = "doUploadFile()">Upload</button>
</form> 

Директива загрузки файла:

.directive('fileModel', ['$parse', function($parse) {
    return {
        restrict: 'A',
        link: function(scope, element, attrs) {
            var model = $parse(attrs.fileModel);
            var modelSetter = model.assign;

            element.bind('change', function() {
                scope.$apply(function() {
                    modelSetter(scope, element[0].files[0]);
                });
            });
        }
    };
}]);

Чего я хочу здесь добиться:

1. После окончания записи выскакивает кнопка / ссылка

2. Эта ссылка связана с записанным аудиофайлом

3. Нажатие этой кнопки вызывает метод doUploadFile ()

Как изменить код и соединить две части, чтобы мы могли загрузить сразу после завершения записи?

Я все еще новичок в AngularJS, буду очень рад вашей помощи!