Accessing element in an Angular directive with Jquery

I have a form inside a nested directive (in an ionic/angular project)

<ion-content class="scroll-content ionic-scroll  has-header">
  <recipe-form>
    <form id="example-form" action="#" class="ng-pristine ng-valid">
    </form>
  </recipe-form>
<div>

But I cannot access this for via Jquery

I tried the followings with out a success 

$(function () {
  #$('#example-form')
  #angular.element(document.querySelector('#example-form'))
  #angular.element.find('#example-form') 
  #angular.element.find('example-form')
  #angular.element(document.querySelector('example-form')) 
}

I also have found several SO questions, and almost all of them are solved by using syntax angular.element(document.querySelector(<element id>))

But for me it gives a blank array []

I'm loading my js file in the head section and after Jquery

any help would be much appreciated

cheers

Update

However, this following method I have in the same file for button click works as expected

$( document ).ready(function() {
  $(document).on('click', 'a.next', function(e){
    arr = [];
    arr = $('.card.recipe-slider');
    current_card = $(this).closest('.card')[0];
    id = current_card.dataset.id;

    if (validateInput(current_card)){
      $(arr[id]).addClass('active');
      $(current_card).removeClass('active');
    } else {
    }

  })

});

Finally I was able to find the solution for my question. This main point I was missing is, you cannot directly access form elements via JQuery inside a directive.

So with the outstanding help of @tasseKATT and with the following article I was able to get it running

Following is my final code (I was trying to add Jquery steps plugin)

angular.module('directive.recipeForm',[])
  .directive('recipeForm', function(){
    return {
       restrict: 'E',
       scope: false,
       link: function(scope, element){
         var form = $("#example-form");
         form.children("div").steps({
           headerTag: "h3",
           bodyTag: "section",
           transitionEffect: "slideLeft",
           onStepChanging: function (event, currentIndex, newIndex)
           {

           },
           onFinishing: function (event, currentIndex)
           {

           },
           onFinished: function (event, currentIndex)
           {

           }
         });
       },
       controller: 'newRecipeCtrl',
       templateUrl: 'templates/directives/recipe_form.html'
    }
  });