Display Foreign Key Name Instead of ID Property in <span> #1747

It may be a simple problem but I can't get it to work. I have an Entity "Term" that as a property "SessionPeriodID" as foreign key from the entity "SessionPeriod". In the "Term" DTO, I included a property to of type SessionPeriodDTO that has the properties I need. But running the terms list displays an internal server error message. When I debugged the code, I noticed it was because of the included SessionPeriodDTO property. I don't know what to do from here. Please help.

Term.cs

[Table("Terms")]
    public class Term : FullAuditedEntity<Int32>, IMustHaveTenant
    {
        [Required(AllowEmptyStrings = false, ErrorMessage = "Term Name is required"),
         StringLength(50, ErrorMessage = "Cannot be more than 50 characters")]
        public string Name { get; set; }

        [Required, DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true),
            Display(Name = "Start Date")]
        public DateTime StartDate { get; set; }

        [DataType(DataType.Date), DisplayFormat(DataFormatString = "{0:yyyy-MM-dd}", ApplyFormatInEditMode = true),
            Display(Name = "Stop Date")]
        public DateTime? StopDate { get; set; }

        [NotMapped]
        public PeriodStatus Status { get; set; }

        [Column("Status")]
        public string StatusString
        {
            get
            {
                return Status.ToString();
            }
            private set
            {
                Status = value.ParseEnum<PeriodStatus>();
            }
        }

        public int SessionPeriodID { get; set; }

        public int TenantId { get; set; }

        [ForeignKey("SessionPeriodID")]
        public virtual SessionPeriod SessionPeriod { get; set; }
    }

TermDTO

public class TermsListDTO : FullAuditedEntityDto
    {
        public string Name { get; set; }

        public int SessionPeriodID { get; set; }
        public string SessionPeriodName { get; set; }

        public DateTime StartDate { get; set; }

        [DisplayFormat(NullDisplayText = "Not Specified")]
        public DateTime? StopDate { get; set; }

        public PeriodStatus Status { get; set; }

        public string StatusString { get; private set; }

        public virtual SessionPeriodDTO SessionPeriod { get; set; }

    }

SessionPeriodDTO

[AutoMapFrom(typeof(SessionPeriod))]
    public class SessionPeriodDTO : CreationAuditedEntityDto
    {
        public virtual string Name { get; protected set; }

        public virtual DateTime? StartDate { get; protected set; }

        public virtual DateTime? StopDate { get; protected set; }

    }

.cshtml

<span ng-show="!term.showEdit">{{term.sessionPeriod.name}}</span>

Please note that the <span> was taken out of table of data and other columns work except the above.