[SalesForce] $A.util.addClass not working on components that are inside aura:if

I have some buttons inside a component that are by default hidden, but are shown when certain event is received.

When I receive the event, I am using $A.util.addClass() and $A.util.removeClass() to remove slds-hide and add slds-show. But this is not working.

Markup:

<lightning:layout aura:id="modalSearch">
    <aura:if isTrue="{!v.showModal}">
        <c:modal title="Test Modal">
            <aura:set attribute="left">
                <lightning:button  aura:id="leftCancelButton" variant="neutral" label="Cancel" onclick="{!c.hideModal}" class="slds-hide" />
            </aura:set>
            <aura:set attribute="right">
                <lightning:button aura:id="rightCancelButton" variant="neutral" label="Cancel" value="modalSearch" onclick="{!c.hideModal}" class="slds-hide"/>
                <lightning:button aura:id="doneButton" variant="brand" label="Done" value="modalSearch" onclick="{!c.handleDone}" class="slds-hide"/>
            </aura:set>        
        </c:modal>
    </aura:if>
</lightning:layout>

<!--some code -->

Controller: Here modal is made visible on click of a button:

showUploadModal: function( component, event, helper ) {
    $A.util.addClass('modalSearch', 'slds-show');  //Theses classes work 
fine
    $A.util.removeClass('modalSearch', 'slds-hide');//Theses classes work 
fine
    component.set( 'v.showModal', true );
}

Now after this modal is opened, after some action an event is thrown from other component and handled in this component helper as below:

Helper, to show the already hidden buttons conditionally:

var leftCancelButton = component.find('leftCancelButton');
var rightCancelButton = component.find('rightCancelButton');
var doneButton= component.find('doneButton');
if($A.get("$Browser.isIPad")){
    $A.util.removeClass(leftCancelButton, 'slds-hide'); 
    $A.util.addClass(leftCancelButton, 'slds-show');
}
else{
    $A.util.removeClass(rightCancelButton, 'slds-hide'); 
    $A.util.addClass(rightCancelButton, 'slds-show');    
}
$A.util.removeClass(doneButton, 'slds-hide'); 
$A.util.addClass(doneButton, 'slds-show');

Modal.cmp markup:

<div>
    <div class="slds-float--left">
        <aura:iteration items="{!v.left}" var="action">
            <span class="slds-p-horizontal--x-small">{!action}</span>
        </aura:iteration>
    </div>
    <div class="slds-float--right">
        <aura:iteration items="{!v.right}" var="action">
            <span class="slds-p-horizontal--x-small">{!action}</span>
        </aura:iteration>
    </div>
</div>

I think this is due to the aura:if. However, can somebody please help what can be solution for this?