Canvas object says undefined getContext () method in Angular JS / iONIC?

I am working on an ionic framework for mashup development. The app requires a signature plugin, I saw JSignature & SiganturePad had a nice implementation. but both of them are implemented with jQuery support.mine is fully supported by Angular JS.

From the options above, I decided to move on to implementing SignaturePad in my application. I am populating SignaturePad html using $ ionicModal . This is where code stuff is added.

Signature.html

<ion-modal-view> 
    <div id="signature-pad" class="m-signature-pad">
    <div class="m-signature-pad--body">
      <canvas></canvas>
    </div>
    <div class="m-signature-pad--footer">
      <div class="description">Sign above</div>
      <button class="button clear" data-action="clear" ng-click="doSave()">Clear</button>
      <button class="button save" data-action="save">Save</button>
    </div>
  </div>  
 </ion-modal-view>

      

        
        
        
      

    

Js here

$ionicModal.fromTemplateUrl('templates/signature.html', {
    scope: $scope,
    animation: 'slide-in-up'
  }).then(function(modal) {
    $scope.modal = modal;
  });
  $scope.openModal = function() {
    $scope.modal.show();
    $scope.wrapper = angular.element(document.getElementById("signature-pad"));
    var  canvas = angular.element($scope.wrapper.find('.canvas')); 

    SignaturePad(canvas);   
  };
  $scope.closeModal = function() {
    $scope.modal.hide();
  };
  //Cleanup the modal when we're done with it!
  $scope.$on('$destroy', function() {
    $scope.modal.remove();
  });
  // Execute action on hide modal
  $scope.$on('modal.hidden', function() {
    // Execute action
  });
  // Execute action on remove modal
  $scope.$on('modal.removed', function() {
    // Execute action
  });
  //$timeout($scope.openModal, 200);

 $scope.doSave=function()
  {
  if (angular.isUndefined($scope.signaturePad)) {
        alert("Please provide signature first.");
    } else {
        window.open($scope.signaturePad.toDataURL());
    }
  };
  var SignaturePad = function (canvas, options) {
        var self = this,
            opts = options || {};

        this.velocityFilterWeight = opts.velocityFilterWeight || 0.7;
        this.minWidth = opts.minWidth || 0.5;
        this.maxWidth = opts.maxWidth || 2.5;
        this.dotSize = opts.dotSize || function () {
            return (this.minWidth + this.maxWidth) / 2;
        };
        this.penColor = opts.penColor || "black";
        this.backgroundColor = opts.backgroundColor || "rgba(0,0,0,0)";
        this.onEnd = opts.onEnd;
        this.onBegin = opts.onBegin;

        this._canvas = canvas;


        this._ctx = canvas.getContext("2d");
        console.log("CANVAS"+this._canvas.width);
        //this.clear();

      //  this._handleMouseEvents();
       // this._handleTouchEvents();
    };


});

      

        
        
        
      

    

I am having problem referencing DOM elements from html via getElementbyID (). This issue was fixed with the following solution. ionic modal reference

By default, Angular js provides some functionality via jQuery / jqlite . So after all the trouble and I got it to work this morning. But according to jqlite, canvas elements are accessed via id or selectors returned as a jQuery object, not as a canvas. Since it is a jQuery object, I cannot use the canvas property. So after running the code, I get an error like

TypeError: Object [object Object] has no getContext method

How can I render as a canvas class or is there a way to satisfy my requirements?