How to pass value to bootstrap modal? - html

Question

I'm using Bootstrap to display my modal in my webpage. My data is stored in database. I used ng-repeat to get my array data from database. I want to pass my room.room_name into modal. How can I do that?
HTML:
<tr data-ng-repeat="room in data">
<td>{{room.room_id}}</td>
<td>{{room.room_name}}</td>
<td>{{room.max_pax}}</td>
<td>{{room.no_booked}}</td>
<td>
<button class="btn btn-warning" data-toggle="modal" data-target="#editRoom"></button>
<button class="btn btn-danger" data-ng-click="delRoom(room.room_id)"></button>
</td>
</tr>
My Modal:
I want to pass room_room.name value and insert into input text value.
I tried to use ng-value but failed.
<div id="editRoom" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit Library Discussion Room</h4>
</div>
<div class="modal-body">
<form>
<label for="editName">Room Name: </label>
<input type="text" name="editName" data-ng-model="room.name" id="editName" data-ng-value="{{room.room_name}}" />
<br />
<label for="editMaxPax">Maximum Person: </label>
<input type="text" name="editMaxPax" data-ng-model="room.maxPax" id="editMaxPax" value="room.max_pax" />
<button type="submit" class="btn btn-default" data-ng-click="editRoom(room)">Edit</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
AngularJS (Controller):
My get the value from database and store it into array named "data".
var app = angular.module("myApp", ['ngRoute']);
app.config(['$routeProvider', function ($routeProvider) {
"use strict";
$routeProvider
.when("/", {
templateUrl: "facilities.html"
});
}]);
app.controller("myCtrl", function ($scope, $http) {
"use strict";
$scope.state = "";
$scope.addRoom = function (room) {
$http.post("add_library_room.php", {'room_name': room.name, 'max_pax': room.maxPax})
.then(function () {
$scope.msg = "Room is inserted into database.";
});
};
$scope.displayRoom = function () {
$http.get("view_library_room.php")
.then(function (response) {
var data = response.data;
$scope.data = data;
console.log(data);
});
};
$scope.delRoom = function (roomID) {
$http.post("del_library_room.php", {'room_id': roomID})
.then(function () {
$scope.msg = "Room is deleted successfully.";
});
};
$scope.footer = function (page) {
if (page === "login") {
$scope.state = page;
} else {
$scope.state = "";
}
return $scope.state;
};
});