Loading different modal based on knockout.js value - html

Question

So I have a table of people's information and I used codes that look something like below (people's location in this case):
<!-- ko foreach: filteredApplications -->
<div class="col-md-6">
<span>Location:</span>
<span data-bind="text: application.candidateLocation"></span>
</div>
to display location information for all people.
And when I click the "Preview Application" link, it is supposed to give me a modal like the attached image and show the information of the corresponding person.
I tried to remove the foreach knockout for the modal, but then it gives me an error saying that it cannot find the application.candidateLocation variable.
How do I have to approach this issue?
Please help!
EDIT (viewmodel):
public partial class Application
{
public dynamic JsonForm => new
{
CandidateLocation,
Job = this.Job.JsonForm,
CandidateStatus = this.CurrentStatuse.CandidateStatus,
};
public string CandidateLocation
{
get
{
switch (ApplicationCandidateType)
{
case ApplicationCandidateType.Standard:
return InsideApplication.CandidateApplication.Candidate.Location;
case ApplicationCandidateType.Guest:
return null;
case ApplicationCandidateType.Manual:
return null;
default:
throw new Exception("Unhandled ApplicationCandidateType");
}
}
}
function ViewModel() {
var self = this;
self.invite = ko.observable(false);
self.changeStylesInvite = function () {
self.invite(true);
}
self.notifications = ko.observableArray(#Html.Json(Model.Notifications.Select(o => o.JsonForm)) || []);
self.applications = ko.observableArray(#Html.Json(Model.ApplicationCompatibilities.Select(o => o.JsonForm)) || []);
self.applicationInvitations = ko.observableArray(#Html.Json(Model.ApplicationInvitations.Select(o => o.JsonForm)) || []);
self.applicationsFilter = ko.observable("new");
self.showHiddenApplications = ko.observable(false);
self.newApplicationsCount = ko.computed(function() {
return ko.utils.arrayFilter(self.applications(), function(i) {
return !i.application.isShortlisted && !i.application.isContactInfoSent && (self.showHiddenApplications() || !i.application.isHidden);
}).length;
});
self.shortlistedApplicationsCount = ko.computed(function() {
return ko.utils.arrayFilter(self.applications(), function(i) {
return i.application.isShortlisted && (self.showHiddenApplications() || !i.application.isHidden);
}).length;
});
self.connectedApplicationsCount = ko.computed(function() {
return ko.utils.arrayFilter(self.applications(), function(i) {
return i.application.isContactInfoSent && (self.showHiddenApplications() || !i.application.isHidden);
}).length;
});
self.allApplicationsCount = ko.computed(function() {
return ko.utils.arrayFilter(self.applications(), function(i) {
return (self.showHiddenApplications() || !i.application.isHidden);
}).length;
});