Inserting data to mysql db in angularjs

Question

I am trying to insert data to MySql db using AngularJS. But an empty row is inserted every time I click on the "Submit" button. I am following the code below.

signup.html

<form name="userForm" ng-controller="MyFormCtrl"  ng-submit="submitForm(userForm.$valid)" novalidate> <!-- novalidate prevents HTML5 validation since we will be validating ourselves -->

        <!-- NAME -->
        <div class="form-group">
            <label>Name</label>
			<input type="text" name="name" class="form-control" ng-model="formModel.name" required>
			<p ng-show="userForm.name.$invalid && !userForm.name.$pristine" class="help-block">You name is required.</p>
        </div>
		
		<div class="form-group">
            <label>Surname</label>
			<input type="text" name="surname" class="form-control" ng-model="formModel.surname" required>
			<p ng-show="userForm.surname.$invalid && !userForm.surname.$pristine" class="help-block">You surname is required.</p>
        </div>

        <!-- USERNAME -->
        <div class="form-group">
            <label>Username</label>
            <input type="text" name="username" class="form-control" ng-model="formModel.username" ng-minlength="3" ng-maxlength="8" required>
			<p ng-show="userForm.username.$error.minlength" class="help-block">Username is too short.</p>
			<p ng-show="userForm.username.$error.maxlength" class="help-block">Username is too long.</p>
		</div>
        
        <!-- EMAIL -->
        <div class="form-group">
            <label>Email</label>
            <input type="email" name="email" class="form-control" ng-model="formModel.email" required>
			<p ng-show="userForm.email.$invalid && !userForm.email.$pristine" class="help-block">Enter a valid email.</p>
        </div>
		
		<div class="form-group">
            <label>Password</label>
            <input type="password" name="pwd" class="form-control" ng-model="formModel.pwd" required>
			<p ng-show="userForm.pwd.$invalid && !userForm.pwd.$pristine" class="help-block">Enter a valid email.</p>
        </div>
		
		<div class="form-group">
            <label>Repeat password</label>
			<input type="password" name="pwd2" class="form-control" ng-model="formModel.pwd2" required>
			<p ng-show="userForm.pwd2.$invalid && !userForm.pwd2.$pristine" class="help-block">Enter a valid password.</p>
        </div>
		
		<small id="emailHelp" class="form-text text-muted" ><a href="login.html">I already have an account. Login</a></small><br><br>
		<div class="form-group">
			<button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid" ng-click="insertData()">Submit</button>
		</div>

controller.js

var validationApp = angular.module('validationApp', []);

// create angular controller
validationApp.controller('MyFormCtrl', function($scope, $http) {
	$scope.insertData = function(){
		$http.post("insert.php", {'name':$scope.formModel.name, 'surname':$scope.formModel.surname, 'username':$scope.formModel.username, 'email':$scope.formModel.email, 'pwd':$scope.formModel.pwd})
		.success(function(data, status, headers, config){
            console.log("inserted Successfully");
        });
	};
});

insert.php

<?php
$data = json_decode(file_get_contents("php://input"));
$name = mysql_real_escape_string($data->name);
$surname = mysql_real_escape_string($data->surname);
$username = mysql_real_escape_string($data->username);
$email = mysql_real_escape_string($data->email);
$pwd = mysql_real_escape_string($data->pwd);

mysql_connect("localhost", "root", "") or die(mysql_error()); 
mysql_select_db("testdb") or die(mysql_error()); 
mysql_query("INSERT INTO signedup (name, surname, username, email, password) VALUES ('$name', '$surname', '$username', '$email', '$pwd')";); 

Print "Your information has been successfully added to the database."; 
?>

I am new to AngularJS, so any help would be appreciated!