[SalesForce] default lightning:inputField dependent picklist

Can you check this code? Notice how am I defining attributes for the picklists, and then I have selected a value from controlling picklist, the values get refreshed in the dependent one.

<aura:component >
<aura:attribute name="parentOptions" type="List"/>
<aura:attribute name="dependentPicklist" type="Object"/>
<aura:attribute name="dependentOptions" type="List"/>
<aura:attribute name="disabledPick" type="Boolean" default="true"/>

<aura:handler name="init" value="{!this}" action="{!c.doInit}"/>

<div class="slds-container--center slds-container--small slds-m-top--small">
    <div class="slds-form--stacked">

        <lightning:select name="parentPicklist" label="Country" aura:id="parentPicklist" onchange="{!c.PickChange}">
            <option value="">None</option>
            <aura:iteration items="{!v.parentOptions}" var="p">
                <option value="{!p.value}">{!p.text}</option>
            </aura:iteration>
        </lightning:select>

        <lightning:select name="dependentPicklist" label="Cities" disabled="{!v.disabledPick}">
            <option value="">None</option>
            <aura:iteration items="{!v.dependentOptions}" var="d">
                <option value="{!d.value}">{!d.text}</option>
            </aura:iteration>
        </lightning:select>

    </div>
</div>

And this is the code for client side controller:

({
    doInit : function(component, event, helper) {
        var pVals = [
            {text:"India", value: "India"},
            {text:"USA", value: "USA"}
        ];

        var dPick = {
            "India" : [
                {text:"Hyderabad", value: "Hyderabad"},
                {text:"Chennai", value: "Chennai"}
            ],
            "USA" : [
                {text:"San Francisco", value: "San Francisco"},
                {text:"Chicago", value: "Chicago"}
            ]
        };

        component.set('v.parentOptions', pVals);
        component.set('v.dependentPicklist', dPick);

    },

    PickChange : function(component, event, helper) {
        var parentValue = component.find('parentPicklist').get('v.value');
        component.set('v.dependentOptions', component.get('v.dependentPicklist')[parentValue]);

        if(parentValue != '')
        component.set('v.disabledPick',false);
        else
        component.set('v.disabledPick',true);
    }
})

When the expression is reevaluated, the picklist is changing back to the previous value. This happens because changing a value causes an aura:valueChange that ultimately ends up causing the settings to go back to default. Instead, you will want to set the selected value on the ui:inputSelect directly. Because of the "rendering cycle," you should set the picklist value asynchronously after setting the options for the list.

Here's a demonstration about how to properly set the picklist values and the default value:

<aura:application >
    <aura:attribute name="sel" type="String" />
    <aura:attribute name="opts" type="List" />

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <ui:inputSelect value="{!v.sel}" label="Demo">
        <aura:iteration items="{!v.opts}" var="opt">
            <ui:inputSelectOption text="{!opt}" value="{!opt}" />
        </aura:iteration>
    </ui:inputSelect>
</aura:application>

({
    init: function(component, event, helper) {
        setTimeout(
            $A.getCallback(
                function() {
                    component.set("v.sel", "there");
                }
            )
        );
        component.set("v.opts", ["hello","there","world"]);
    }
})

Note the use of $A.getCallback to make sure the value change occurs, and the setTimeout function so it will be called after the picklist values render. Note that in your case, since you're going to the server asynchronously, you'll need to set the default value once, via setTimeout, after setting the new picklist values.