AngularJS insert page refresh - php

Question

I wish to add a record in MySQL database through AngularJS and PHP. the record is added successfully but the AngularJS effect is not seen. that is the page is not automatically refreshed. below is the code was given:
controller:
$scope.add = function() {
var elem = angular.element($element);
var dt = $(elem).serialize();
//alert($element);
console.log($(elem).serialize());
$http({
method: 'POST',
url: 'php/add.php',
data: dt,
headers: {'Content-Type': 'application/x-www-form-urlencoded'}
}).success(function(data, status) {
$scope.status = status;
$scope.data = data;
console.log(data);
data.push(this);
$scope.products = data; // Show result from server in our <pre></pre> element
}).error(function(data, status) {
$scope.data = data || "Request failed";
$scope.status = status;
});
};
index.html
<li ng-repeat="product in products" ng-model = 'products'>
{{product.description}}|{{product.name}} | edit | delete
<input type="hidden" name="hdnid" ng-model="hdn" value="{{product.product_id}}"/>
</li>
add.php
<?php
include 'connect.php';
mysql_select_db($database,$con);
$nm = $_POST['keywords'];
$desc = $_POST['desc'];
$query = "INSERT INTO `product`(`name`,`description`) VALUES ('$nm', '$desc')";
$result = mysql_query($query) OR die(mysql_error());
?>
What should I do to automatically refresh the page
?

Answer 1

When you assign new array or modify existing to $scope.products, it will automatically list each product in the new/modified list in the html. You don't have to reload the page.
In your case the response data for the post should be json array and if it is not, it wont work.
Something like mysql_query($query).toJSON should work.
If you want refresh the page ( for some non -angular reasons), you should explicitly do it in the success of the http call. Remember the GET/POST calls made using the $http wrapper are ajax calls.
example: http://jsfiddle.net/Y3b3H/12/