How to record video and Audio in angularJS mobile Website

I am developing a mobile website using Express and AngularJS.

I want to show a modal to the user to record a video and then save it in a folder.

I tried using RecordRTC, this is my code:

video.partial.html

<script src="./../../node_modules/recordrtc/RecordRTC.js"></script>
<div ng-controller="index">
  <button ng-click="addVideo()">Add Video</button>
</div>

app.js

var app = angular.module('myApp', ['ngRoute', 'ngMaterial', 'ui.bootstrap']);
app.controller('index', ['$scope', '$location', 'Storage', '$http', '$modal', '$sce', function ($scope, $location, Storage, $http, $modal, $sce) {
  $scope.addVideo = function () {
    console.log('adding Video');
    $scope.openVideoModal();
  };

  $scope.openVideoModal = function (data) {
    $scope.modalInstance = $modal.open({
      templateUrl: 'partials/video.modal.html',
      controller: 'index',
      resolve: {
        data: function () {
          return data === null ? {} : data;
        }
      }
    }).result.then(function () { }, function (res) { });
  };
}

video.modal.html

<style>
    html,
    body {
        margin: 0!important;
        padding: 0!important;
        overflow: hidden!important;
        width: 100%;
    }
</style>

<div class="modal-header">
    <h4 class="modal-title">Record Video</h4>
</div>
<div style="margin: 5%;">
    <button class="md-raised md-primary" id="btn-start-recording">Start Recording</button>
    <button class="md-raised md-primary" id="btn-stop-recording">Stop Recording</button>
    <hr>
    <video controls autoplay style: "width: 100%"></video>
</div>
<script>
console.log('script is called here');
var recorder; // globally accessible
var btnStart = document.getElementById('btn-start-recording');
var btnStop = document.getElementById('btn-stop-recording');
var video = document.querySelector('video');

function captureCamera(callback) {
    navigator.mediaDevices.getUserMedia({ audio: true, video: true }).then(function (camera) {
        console.log('capture camera');
        callback(camera);
    }).catch(function (error) {
        alert('Unable to record Video.');
        console.error(error);
    });
};

function stopRecordingCallback() {
    console.log('stop recording');
    video.src = video.srcObject = null;
    video.src = URL.createObjectURL(recorder.getBlob());
    video.play();
    recorder.camera.stop();
    recorder.destroy();
    recorder = null;
};

btnStart.onclick = function () {
    this.disabled = true;
    console.log('start recording');
    captureCamera(function (camera) {
        setSrcObject(camera, video);
        video.play();
        recorder = RecordRTC(camera, {
            type: 'video'
        });
        recorder.startRecording();
        // release camera on stopRecording
        recorder.camera = camera;
        btnStop.disabled = false;
    });
};

btnStop.onclick = function () {
    console.log('stopping recording');
    this.disabled = true;
    recorder.stopRecording(stopRecordingCallback);
    btnStart.disabled = false;
};
</script>

But now, the script from the modal does not load when the modal is shown, and thus clicking the start recording button does nothing.

Is there some way to fix this? or, is there a better way to record audio and video in AngularJS?

Any suggestions would be helpful!

Source: AngularJS