How to display the contact records based on Account with radio button in salesforce lightning

Apex class
==========
public class AccountController
{
    @AuraEnabled
    public static List<Account> displayAccRecords()
    {
        return [select Id,Name from Account LIMIT 5];
    }
    @AuraEnabled
    public static List<Contact> displayConRecords(String accId)
    {
        List<Contact> returnconlist=new List<Contact>();
        for(Contact con:[select Id,AccountId,FirstName,LastName from Contact where AccountId=:accId])
        {
            if(con!=null)
            {
                returnconlist.add(con);
            }
        }
        return returnconlist;
    }

}

Accountcomponent.cmp
====================
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" access="global" controller="AccountController" >

    <aura:attribute name="accData" type="list"/>
    <aura:attribute name="conData" type="list"/>
    <aura:attribute name="defaultRadiobtn" type="boolean" default="false"/>
    <aura:handler name="init" value="{!this}" action="{!c.doInit}"/>
<b>Accounts</b>
    <table class="slds-table slds-table_cell-buffer slds-table_bordered">
        <tr>
            <td>Select</td>
            <td>Id</td>
            <td>Name</td>
        </tr>
        <aura:iteration items="{!v.accData}" var="Items">
            <tr>
<td>
<lightning:input aura:id="radioButton"  name="radio" type="Radio" value="{!Items.Id}"  onchange="{!c.displayContacts}"   />      
</td>
                <td>{!Items.Id}</td>
                <td>{!Items.Name}</td>
           </tr>
        </aura:iteration>
    </table>
    <aura:if isTrue="{!v.conData.length=0}">
        <c:Contactcomponent conlist="{!v.conData}"/>
    </aura:if>
</aura:component>

Accountcomponentcontroller.js
=============================
({
doInit : function(component, event, helper)
    {
        var action=component.get("c.displayAccRecords");
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==='SUCCESS')
            {
                component.set("v.accData",response.getReturnValue());
            }
            else
            {
                console.log('Error');
            }
           
        });
        $A.enqueueAction(action);

},
    displayContacts:function(component,event,helper)
    {
       
        var currentId=event.getSource().get("v.value");
        var action=component.get("c.displayConRecords");
        action.setParams({
            "accId":currentId
           
        });
        action.setCallback(this,function(response){
            var state=response.getState();
            if(state==='SUCCESS')
            {
                component.set("v.conData",response.getReturnValue());
            }
            else
            {
                console.log('Error');
            }
           
        });
        $A.enqueueAction(action);
       
    }
   
})

Contactcomponent.cmp
====================
<aura:component implements="force:appHostable,forceCommunity:availableForAllPageTypes" access="global" >
<aura:attribute name="conlist" type="list"/>
    <aura:if isTrue="{!v.conlist.length!=0}">
   <b>Contacts</b>
<table class="slds-table slds-table_cell-buffer slds-table_bordered">
<tr>
<td>FirstName</td>
<td>LastName</td>
</tr>
<aura:iteration items="{!v.conlist}" var="Items">
<tr>
<td>{!Items.FirstName}</td>
<td>{!Items.LastName}</td>
</tr>
</aura:iteration>
</table>
    </aura:if>
</aura:component>

LighntingApplication
====================
<aura:application  extends="force:slds">
    <c:Accountcomponent/>
</aura:application>