I'm completely stuck on this one. Has anyone completed this module?

I'm trying to figure out how to have the error message show up in the "Display" component. I thought having the same "recordSaveError" attribute in both components would cause them to share the same reference..., but it's not working. Help!

Here is my Display component

<aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader,force:hasRecordId">
	<aura:attribute name="account" type="Object"/>
    <aura:attribute name="accountRecord" type="Object"/>
    <aura:attribute name="recordSaveError" type="String"/>

    <force:recordData aura:id="accountRecordLoader"
      recordId="{!v.recordId}"
      layoutType="FULL"
      targetRecord="{!v.account}"
      targetFields="{!v.accountRecord}"
      fields="Name,Industry,Description,Phone"
      targetError="{!v.recordSaveError}"
      />

    <!-- Display a header with details about the record -->
    <div class="slds-page-header" role="banner">
        <ui:outputText value="{!v.accountRecord.Name}"/>
        <ui:outputText value="{!v.accountRecord.Industry}"/>
        <ui:outputTextArea value="{!v.accountRecord.Description}"/>
        <ui:outputPhone value="{!v.accountRecord.Phone}"/>
    </div>

    <!-- Display Lightning Data Service errors, if any -->
    <aura:if isTrue="{!not(empty(v.recordSaveError))}">
        <div class="recordError">
            <ui:message title="Error" severity="error" closable="true">
                {!v.recordSaveError}
            </ui:message>
        </div>
    </aura:if>
</aura:component>

Here is my Edit Component

<aura:component implements="flexipage:availableForRecordHome,force:hasRecordId">

    <aura:attribute name="accountRecord" type="Object"/>
    <aura:attribute name="record" type="Object"/>
    <aura:attribute name="newAccountError" type="String"/>
    <aura:attribute name="recordSaveError" type="String"/>

    <force:recordData aura:id="AccountRecordEditor"
        recordId="{!v.recordId}"
        layoutType="FULL"
        targetRecord="{!v.record}"
        targetFields="{!v.accountRecord}"
        targetError="{!v.recordSaveError}"
        mode="EDIT" fields="Name"
        recordUpdated="{!c.handleRecordUpdated}"
        />
        
        <ui:outputText value="Edit Account" class="slds-output" />
        
        <lightning:input value="{!v.accountRecord.Name}" aura:id="recordName" name="accountRecord" label="Name" />
        
        <ui:button label="Save Account" press="{!c.handleSaveRecord}" class="slds-m-top--medium"/>

 </aura:component>

Here is my edit controller

({
	handleSaveRecord: function(component, event, helper) {
        component.set("v.editAccount.AccountId", component.get("v.recordId"));
        component.find("AccountRecordEditor").saveRecord(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                // record is saved successfully
                var resultsToast = $A.get("e.force:showToast");
                resultsToast.setParams({
                    "title": "Saved",
                    "message": "The record was saved."
                });
                resultsToast.fire();
            } else if (saveResult.state === "INCOMPLETE") {
                // handle the incomplete state
                console.log("User is offline, device doesn't support drafts.");
            } else if (saveResult.state === "ERROR") {
                // handle the error state
                console.log('Problem saving contact, error: ' + JSON.stringify(saveResult.error));
				component.set("v.recordSaveError", JSON.stringify(saveResult.error));
            } else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + JSON.stringify(saveResult.error));
				component.set("v.recordSaveError", JSON.stringify(saveResult.error));
            }
        });
    },

	// Control the component behavior here when record is changed (via any component)
    handleRecordUpdated: function(component, event, helper) {
        var eventParams = event.getParams();
        if(eventParams.changeType === "CHANGED") {
            // get the fields that are changed for this record
            var changedFields = eventParams.changedFields;
            console.log('Fields that are changed: ' + JSON.stringify(changedFields));
            // record is changed so refresh the component (or other component logic)
            var resultsToast = $A.get("e.force:showToast");
            resultsToast.setParams({
                "title": "Saved",
                "message": "The record was updated."
            });
            resultsToast.fire();
        } else if(eventParams.changeType === "LOADED") {
            // record is loaded in the cache
        } else if(eventParams.changeType === "REMOVED") {
            // record is deleted and removed from the cache
			component.set("v.recordSaveError", JSON.stringify(saveResult.error));
        } else if(eventParams.changeType === "ERROR") {
            console.log('Error: ' + component.get("v.error"));
			component.set("v.recordSaveError", JSON.stringify(saveResult.error));
        }
    }
})

Thanks!
Kyle