Cannot reference template element inside directive

I'm trying to create a custom directive to use in Ionic framework. My problem is during the linking phase, I'm not able to query inside my template.

My template is the following:

<ion-nav-buttons side="right">
<div class="searchBar">
    <div class="searchTxt">
        <div class="bgdiv"></div>
        <div class="bgtxt">
            <input class="searchBox" type="text" />
        </div>
    </div>
    <i class="searchIcon icon placeholder-icon" ng-click="callSearch()"></i>
</div>
</ion-nav-buttons>

My linking function is

link: function(scope, element, attrs){...}

But when I check the element the value is:

<ion-nav-buttons side="right" class="hide"></ion-nav-buttons>

How could I get the rest of the elements? Is because I'm using another directive? How can I address this?

When you have the element, then you can make queries to the inside elements with the usuan JQuery syntax:

$(element).find('.searchBar')[0]

or

$(element).find('.searchBox')[0]