Signature Pad not detecting any click and not drawing as a result

Question

I am fairly new to angularjs and am trying to integrate signature_pad library by szimek into my application. Basically I have a bootstrap tab in place for different methods to accept user's signature. One is just typing the name in the input field in the first tab, the second is drawing the signature in the second tab (this is where this library comes into picture) and the third is uploading an image. These tabs are inside a modal as shown below:

Draw tab in the modal

I have taken reference from the demo in the documentation, Demo and you'll find 90% of the code is copied from the demo only, right from the HTML to Js and CSS.

Now the issue is that first of all, my canvas is not getting an height and width properly even though the resize function is called. The offsetWidth and offsetHeight is always 0 and thus the canvas doesn't get proper height and width. Now even if I comment out the resizeCanvas function and hard-code the height and width for the canvas, the canvas gets the dimensions but fails to draw anything on it i.e. the points are not registered on clicking.

Here's my JS code:

$scope.showSignaturePopup = (documentData) => {
    $("#signaturePopup").modal("show");


    $scope.signatureName = '';
    $scope.signatureFont = '';
    $scope.documentData = documentData;
    $scope.documentPreviewEnabled = true;


    $scope.wrapper = document.getElementById("signature-pad");
    $scope.canvas = $scope.wrapper.querySelector("canvas");
    $scope.signaturePad = new SignaturePad($scope.canvas, {
        // It's Necessary to use an opaque color when saving image as JPEG;
        // this option can be omitted if only saving as PNG or SVG
        backgroundColor: 'rgb(255, 255, 255)'
    });

    // console.log('$scope.signaturePad, $scope.canvas -------> ', $scope.signaturePad, $scope.canvas);
    window.onresize = $scope.resizeCanvas;
    $scope.resizeCanvas();
}

$scope.resizeCanvas = () => {
    $scope.ratio = Math.max(window.devicePixelRatio || 1, 1);

    $scope.canvas.width = $scope.canvas.offsetWidth * $scope.ratio;
    $scope.canvas.height = $scope.canvas.offsetHeight * $scope.ratio;
    $scope.canvas.getContext("2d").scale($scope.ratio, $scope.ratio);

    console.log('$scope.canvas.width, $scope.canvas.height -------> ', $scope.canvas.width, $scope.canvas.height);
    console.log('$scope.canvas.offsetWidth, $scope.canvas.offsetHeight -------> ', $scope.canvas.offsetWidth, $scope.canvas.offsetHeight);
    console.log('$scope.ratio -------> ', $scope.ratio);
    $scope.signaturePad.clear();
    console.log('$scope.signaturePad, $scope.canvas -------> ', $scope.signaturePad, $scope.canvas);
}

$scope.saveSign = () => {
    console.log('signaturePad.toDataURL() -------> ', $scope.signaturePad.toDataURL());
}

Here's my HTML code

<div id="signaturePopup" class="modal erpModal fade" role="dialog" data-backdrop="static" data-keyboard="false">
    <div class="modal-dialog">

        <!-- Modal content-->
        <form name="signForm" class="erpForm" ng-submit="" novalidate>
            <div class="modal-content">
                <div class="modal-header greyBg">
                    <button type="button" class="close" ng-click="" data-dismiss="modal">&times;</button>
                    <h4 class="modal-title" style="font-weight: bold;">Sign Document</h4>
                </div>
                <div class="modal-body longModal">
              
                    <!-- Signature Acceptance section -->
                    <div class="padd15">
                        <ul class="signatureTabs nav nav-tabs">
                            <li class="active"><a class="signatureTab" data-toggle="tab" data-target="#typeSign" role="tab" data-toggle="tab">Type</a></li>
                            <li><a class="signatureTab" data-toggle="tab" data-target="#drawSign" role="tab" data-toggle="tab">Draw</a></li>
                            <li><a class="signatureTab" data-toggle="tab" data-target="#menu2" role="tab" data-toggle="tab">Upload</a></li>
                        </ul>
                        
                        <div class="tab-content">
                            <div id="typeSign" class="tab-pane fade in active">
                                <div class="marTop20 marBottom20 f-15">Create your signature by typing your full name.</div>
                                <div id="signatureNameContainer">
                                    <input type="text" ng-model="signatureName" class="erpInput">
                                </div>                                       
                            </div>
                            <div id="drawSign" class="tab-pane fade">
                                <h3>Menu 1</h3>
                                <div id="signature-pad" class="signature-pad">
                                    <div class="signature-pad--body">
                                        <canvas></canvas>
                                    </div>
                                    <div class="signature-pad--footer">
                                        <div class="description">Sign above</div>
                                
                                        <div class="signature-pad--actions">
                                            <div>
                                                <button type="button" class="button clear" data-action="clear">Clear</button>
                                                <button type="button" class="button" data-action="change-color">Change color</button>
                                                <button type="button" class="button" data-action="undo">Undo</button>
                                
                                            </div>
                                            <div>
                                                <button type="button" class="button save" data-action="save-png" ng-click="saveSign()">Save as PNG</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div id="menu2" class="tab-pane fade">
                                <h3>Menu 2</h3>
                                <p>Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.</p>
                            </div>
                        </div>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="reset" class="btn btn-default greyBtn custBtn" data-dismiss="modal" ng-click="">Cancel</button>
                    <button type="submit" class="btn btn-default yellowBtn custBtn" ng-click="">Submit</button>
                    <button type="submit" class="btn btn-default yellowBtn custBtn" ng-click="documentPreviewEnabled = false">Add Signature</button>
                </div>
            </div>
        </form>
    </div>
</div>

Here's my CSS:

.signature-pad {
  position: relative;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  font-size: 10px;
  width: 100%;
  height: 100%;
  max-width: 700px;
  max-height: 460px;
  border: 1px solid #e8e8e8;
  background-color: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.27), 0 0 40px rgba(0, 0, 0, 0.08) inset;
  border-radius: 4px;
  padding: 16px;
}

.signature-pad::before,
.signature-pad::after {
  position: absolute;
  z-index: -1;
  content: "";
  width: 40%;
  height: 10px;
  bottom: 10px;
  background: transparent;
  box-shadow: 0 8px 12px rgba(0, 0, 0, 0.4);
}

.signature-pad::before {
  left: 20px;
  -webkit-transform: skew(-3deg) rotate(-3deg);
          transform: skew(-3deg) rotate(-3deg);
}

.signature-pad::after {
  right: 20px;
  -webkit-transform: skew(3deg) rotate(3deg);
          transform: skew(3deg) rotate(3deg);
}

.signature-pad--body {
  position: relative;
  -webkit-box-flex: 1;
      -ms-flex: 1;
          flex: 1;
  border: 1px solid #f4f4f4;
}

.signature-pad--body
canvas {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  border-radius: 4px;
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.02) inset;
}

.signature-pad--footer {
  color: #C3C3C3;
  text-align: center;
  font-size: 1.2em;
  margin-top: 8px;
}

.signature-pad--actions {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-top: 8px;
}

I also tried creating a JS fiddle but I don't know how to for an angularjs application. Here's the link - JSFiddle. This doesn't work.

Please help guys. Hope you help out a noobie.