How to get data from http request in angular ui bootstrap model - angularjs

Question

I am trying to get data from http request inside angular ui bootstrap modal here is my modal code
$scope.open = function (size, id) {
$scope.hallName=[];
var modalInstance = $modal.open({
templateUrl: 'video_gallery.html',
controller: HomeCtrl1,
size: size,
resolve:{
hallId:function(){
$http({
url:"../home/get_hall_name/"+id,
method: "POST"
}).success(function (data) {
$scope.hallName=data.hall_name;
alert($scope.hallName);
}).error(function(){
console.log("Something went wrong get_RegisteredHalls");
});
var hall=$scope.hallName;
return hall;
}
}
});
};
var HomeCtrl1 = function ($scope, $modalInstance, hallName) {
$scope.hallName = hallName;
$scope.selected = {};
$scope.ok = function () {};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Here is what I am trying to get hall_name
<script type="text/ng-template" id="video_gallery.html">
<div class="modal-header">
<h4 class="modal-title" style="text-align:center;">Videos of {{hallName}} Hall</h4>
</div>
</script>
I am getting hall_name in alert but cant able to get that in view. please help me to save my day. Thanks in advance.

Answer 1

In order to wait for the http promise to resolve, you need to return it from your function:
hallId:function(){
return $http({
url:"../home/get_hall_name/"+id,
method: "POST"
}).success(function (data) {
}).error(function(){
console.log("Something went wrong get_RegisteredHalls");
});
}
Then in your controller you get this resolved promise:
var HomeCtrl1 = function ($scope, $modalInstance, hallId) {
$scope.hallName = hallId.data.hallName;
$scope.selected = {};
$scope.ok = function () {};
$scope.cancel = function () {
$modalInstance.dismiss('cancel');
};
};
Make sure you have the same name in both the resolve function and the controller (hallId in this case)

Answer 2

There's a couple of confusions.
First, between resolve and model $scope
from documentation,
scope - a scope instance to be used for the modal's content (actually the $modal service is going to create a child scope of a provided scope). Defaults to $rootScope
resolve - members that will be resolved and passed to the controller as locals; it is equivalent of the resolve property for AngularJS routes
Then, you have 2 options to "pass data" to your modal :
Using resolve. If I understand correctly, following code :
$scope.open = function (size, id) {
var modalInstance = $modal.open({
resolve:{
hallId: function() {
return "Walter white";
}
}
});
}
var HomeCtrl1 = function ($scope, $modalInstance, hallId) {
//hallId == "Walter white"
}
injects a hallId variable inside your controller. So inside resolve you provide the code to fill hallId and you get it in your controller, injected as hallId.
Using scope. For example
$scope.open = function (size, id) {
var modalScope = parent.$new();
modalScope.whatever = "Jessee Pinkman";
var modalInstance = $modal.open({
scope: modalScope
});
};
var HomeCtrl1 = function ($scope, $modalInstance) {
//$scope.whatever == "Jessee Pinkman"
}
Then, between synchronous and asynchronous
Inside resolve, you are making an asynchronous $http call, but return synchrounously the expected result. Therefore, this piece of code
var hall=$scope.hallName;
return hall;
is executed before this one
.success(function (data) {
$scope.hallName=data.hall_name;
alert($scope.hallName);
})
I am getting hall_name in alert but cant able to get that in view
Now you understand why.