Here we have a ui-select element that allows users to choose from various options:
<ui-select ng-model="state.selected" ng-change="openModal(state.selected,orders.order_id)" ng-if="orders.state == 'Paid'" theme="selectize" ng-disabled="disabled" style="width: 300px;"> .....
Whenever there are changes, a modal from bootstrap is triggered.
$scope.openModal = function(name,oid){
$scope.modalInstance = $modal.open({
templateUrl: 'reservationModal.html',
scope:$scope,
name: function(){
return name;
}
});
}
$scope.cancel = function(){
$scope.modalInstance.dismiss();
}
$scope.confirmChg = function(){
console.log('ok...');
}
The template used is as shown below:
<script type="text/ng-template" id="reservationModal.html">
<div class="modal-header">
<h3 class="modal-title">Confirmation</h3>
<!--<button class="btn btn-warning" ng-click="close()">X</button>-->
</div>
<div class="modal-body">
Confirm to change status to {{name}} ?
</div>
<div class="modal-footer">
<button class="btn btn-danger" type="button" ng-click="confirmChg(status_oid,status)">Yes</button>
<button class="btn btn-warning" type="button" ng-click="cancel()" data-dismiss="modal">No</button>
</div>
</script>
The issue faced here is that the {{name}} variable in the template does not display. What can be done to successfully pass this variable from the open modal function?