unable to display the response in popup ( modal) - angularjs

Question

on clicking a button I call viewJob function and pass jobId , the response data I am trying to display in bootstrap modal. But I am unable to do it ,the values are assigning as local variable.
Even I tried this in html
{{viewJob(model.citynew)}}
If still you want that as $scope function then try below code:
Controller:
$scope.model = {}
$scope.viewJob = function (jobId) {
UserService.employerJob(jobId).then(function(response) {
if(response.json.response.statuscode == 0) {
$scope.data = response.json.response.data;
$scope.keyskills = $scope.data.keySkill;
$scope.model.citynew = $scope.data.location.city;
$scope.model.numberofpositionsnew = $scope.data.numberOfPositions;
$scope.model.experiencelevelnew = $scope.data.experienceLevel;
$scope.model.link = $scope.data.link;
$('#viewJobModal1').modal('show');
}
});
};
HTML
<div class="modal fade" id="viewJobModal1" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content" id="style-4" style="height:400px;line-height: 1.8;overflow-y: auto;">
<div class="modal-header" style="background-color:#3e79b6;height:50px;">
<div class="col-sm-4" style="font-size:20px;text-align:center;color:white; width: 94.333333% !important;">View Details of Job</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="color:black;">×</span>
</button>
</div>
<div class="modal-body" style="height: 400px;line-height: 1.8;">
<div class="col-lg-12">
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Company Name :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{(model.companynew)}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job title :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{model.jobtitlenew}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job Description :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{model.jobdescriptionnew}}</div>
</div>
</div>
</div>
</div>
</div>
</div>

Answer 1

I don't think you can use {{viewJob(model.citynew)}} because viewJob takes a jobId as parameter.
It's generally recommended to resolve promises as part of the transition when opening a modal, by passing them in the resolves block.
E.g. Calling the modal in your page's controller
$modal.open({
templateUrl: 'path/to/modal/template.html',
controller: 'ModalCtrl',
controllerAs: 'modalCtrl',
resolve: {
job: function () {
return UserService.employerJob(jobId);
}
}
});
Then, in your ModalCtrl, you can grab the job as a dependency display the data however you want in your template
angular.module('AppModule').controller('ModalCtrl', ['job', function (job) {
modalCtrl = this;
modalCtrl.keyskills = job.keySkill;
modalCtrl.citynew = job.location.city;
modalCtrl.numberofpositionsnew = job.numberOfPositions;
modalCtrl.experiencelevelnew = job.experienceLevel;
modalCtrl.companynew = job.company;
modalCtrl.jobtitlenew = job.jobTitle;
modalCtrl.jobdescriptionnew = job.jobDescription;
modalCtrl.link = job.link;
}]);
And then display these in your modal template
<div class="modal fade" id="viewJobModal1" role="dialog" tabindex="-1" aria-hidden="true">
<div class="modal-dialog" role="dialog">
<div class="modal-content" id="style-4" style="height:400px;line-height: 1.8;overflow-y: auto;">
<div class="modal-header" style="background-color:#3e79b6;height:50px;">
<div class="col-sm-4" style="font-size:20px;text-align:center;color:white; width: 94.333333% !important;">View Details of Job</div>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" style="color:black;">×</span>
</button>
</div>
<div class="modal-body" style="height: 400px;line-height: 1.8;">
<div class="col-lg-12">
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Company Name :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{(modalCtrl.companynew)}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job title :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{modalCtrl.jobtitlenew}}</div>
</div>
<div class="col-lg-12" align="center" style="text-align:justify;">
<div class="col-lg-5"><b>Job Description :</b></div>
<div class="col-lg-7" style="text-align:justify;">{{modalCtrl.jobdescriptionnew}} </div>
</div>
</div>
</div>
</div>
</div>
</div>
Hope that helps :)