Q:

MySQL table display empty value after insert data into it by using AngularJS and PHP

I'm a AngularJS and PHP newbie and I'm trying to add some data into MySQL. But MySQL table shows empty value instead of the data I want to insert.
HTML:
<form data-ng-controller="myCtrl">
     <label for="roomName">Room Name: </label>
     <input type="text" name="roomName" data-ng-model="roomName" id="roomName" />

     <br />

     <label for="maxPerson">Maximum Person: </label>
     <input type="text" name="maxPerson" data-ng-model="maxPerson" id="maxPerson" />
     <button type="submit" class="btn btn-default" data-ng-click="addRoom()">Add</button>
</form>

app.js (Controller)
app.controller("myCtrl", function ($scope, $http) {
     "use strict";

     $scope.addRoom = function () {
         $http.post("add_library_room.php", {'roomName': $scope.roomName, 'maxPax': $scope.maxPerson})
             .then(function (response) {
                 $scope.msg = "Room is inserted into database.";
             });
     };
});

add_library_room.php (Insert data)
<?php

define("HOSTNAME","localhost");
define("USERNAME","root");
define("PASSWORD","");
define("DATABASE", "booking_db");

$dbhandle=new mysqli(HOSTNAME, USERNAME, PASSWORD, DATABASE) or die ("Unable to Connect to the Database");

$data=json_decode(file_get_contents("php://input"));

$room_Name=$dbhandle->real_escape_string($data->roomName);
$max_Pax=$dbhandle->real_escape_string($data->maxPax);

$query="INSERT INTO library_discussion_room (room_name, max_pax) VALUES ('$room_Name', '$max_Pax')";

$dbhandle->query($query);

?>

phpMyAdmin MySQL database (The value that I had inserted is empty):
Image Link
I don't know what I'm doing wrong. Hope you guys can help me to solve this problem. Thanks.

A:

It's because you are directly trying to write the data on the scope.
Angular JS often creates childscopes inside of directives to avoid messing up with higher level datas.
So if you directly write ng-model="something", then it will become only a distinct, and not a reference. 
In order to make it work, you'll need to make an object, and refer to it's properties, since angular will search for that object in parent scopes too.
So the solution will be sth like this:
ng-model="object.property"

and then in your controller
$scope.object = {};
$scope.addRoom = function () {
     $http.post("add_library_room.php", {'roomName': $scope.object.roomName, 'maxPax': $scope.object.maxPerson})
         .then(function (response) {
             $scope.msg = "Room is inserted into database.";
         });
 };

