Title: How to pass values / Parameters in the Bootstrap modal
Tags: javascript;json;angularjs;twitter-bootstrap
Question: I want to make something like a cancel button, when user click on that cancel button it will open a modal to ask &quot;Are you sure you want to cancel the task&quot; and if user press &quot;Ok&quot; function will get called under which I am making an API call.
But the issue is there are multiple users and all users having one unique id, I need to pass that unique id to API in order to achieve the desired result, but I don't know how to do it.
I am using AngularJS.
My code-
<tr ng-repeat=&quot;meeting in meetings&quot;&gt;   //getting meetings form some other api call
<td class=&quot;text-center&quot; &gt;
<button type=&quot;button&quot; class=&quot;btn mr-2 mb-2 btn-danger&quot; data-toggle=&quot;modal&quot; ng-click=&quot;cancelMeeting(meeting.meetingId)&quot;&gt;Cancel Meeting</button&gt;
</td&gt;
<tr/&gt;
cancelMeeting Function -
$scope.cancelMeeting = function(id){
console.log(&quot;id =&quot;,id); //getting unique IDs
$('#cancelModal').modal('toggle');
cancelModal -
<div class=&quot;modal fade&quot; id=&quot;cancelModal&quot; tabindex=&quot;-1&quot; role=&quot;dialog&quot; aria-labelledby=&quot;exampleModalLabel&quot; aria-hidden=&quot;true&quot;&gt;
<div class=&quot;modal-dialog&quot; role=&quot;document&quot;&gt;
<div class=&quot;modal-content&quot;&gt;
<div class=&quot;modal-header&quot;&gt;
<h5 class=&quot;modal-title center&quot; id=&quot;exampleModalLabel&quot;&gt;Cancel Meeting ?</h5&gt;
<button type=&quot;button&quot; class=&quot;close&quot; data-dismiss=&quot;modal&quot; aria-label=&quot;Close&quot;&gt;
<span aria-hidden=&quot;true&quot;&gt;&amp;times;</span&gt;
</button&gt;
</div&gt;
<div class=&quot;modal-body&quot;&gt;
<p class=&quot;mb-0&quot;&gt;Are you sure you want to cancel the meeting ?</p&gt;
</div&gt;
<div class=&quot;modal-footer&quot;&gt;
<button type=&quot;button&quot; class=&quot;btn btn-secondary&quot; data-dismiss=&quot;modal&quot;&gt;Cancel</button&gt;
<button type=&quot;button&quot; class=&quot;btn btn-primary&quot; ng-click=&quot;cancelCalling(meeting.meetingId)&quot;&gt;Ok</button&gt;
</div&gt;
</div&gt;
</div&gt;
</div&gt;
In cancelModal I have defined another ng-click in the OK button of modal, to make actual API calling..
cancelCalling Function -
$scope.cancelCalling = function (meetId){
console.log(&quot;Want id to be here so I can pass on API&quot;);
console.log(meetId); //undefined for now
//api calling
$('#cancelModal').modal('toggle');
I know there must be some way, I am doing it wrong but I can't able to figure out what should I need to do. Please Help me
Thanks.

Here is the accepted answer: How about you assign the selected ID in your cancelMeeting function to a scope variable
$scope.cancelMeeting = function(id){
$scope.selectedId = id;
$('#cancelModal').modal('toggle');
Then in your modal have your button like this:
<button type=&quot;button&quot; class=&quot;btn btn-primary&quot; ng-click=&quot;cancelCalling(selectedId)&quot;&gt;Ok</button&gt;


{'source': 'StackExchangeDataset', 'subset': 'stackoverflow.com', 'metadata': {'AnswerCount': 1, 'CommentCount': 0, 'ContentLicense': 'CC BY-SA 4.0', 'CreationDate': '2021:00:08/10/21', 'FavoriteCount': None, 'PostTypeId': 1, 'Tags': '<javascript><json><angularjs><twitter-bootstrap>', 'Title': 'How to pass values / Parameters in the Bootstrap modal', 'ViewCount': 244, 'id': 68731749, 'user_AboutMe': '', 'user_AccountId': 22426433.0, 'user_DisplayName': 'Amara', 'user_Reputation': 319.0, 'user_Views': 38.0, 'user_id': 16632970.0}}