Angular loop is not updating

Question

Just started out with angular. I was successful in saving and retrieving the data from a DB with php. I am also able to loop the data within a list item but when i add a new user the list does not update only when i refresh the browser does it show the newly added user

this is my html code:

<div>
    <ul ng-init="get_user()">
        <li ng-repeat="user in userInfo ">{{user.user_name}}<a href="" ng-click="prod_delete(product.id)"> --> Delete</a></li>
    </ul>
</div>

this is my app.js code:

var app = angular.module('AddUser', ['ui.bootstrap']);

app.controller('AppCtrl', function($scope, $http){
    $scope.userInfo =  [];

    /** function to add details for a user in mysql referecing php **/
    $scope.save_user = function() {

        $http.post('db.php?action=add_user', 
            {
                'user_name'  : $scope.user_name, 
                'user_email' : $scope.user_email
            }
        )

        .success(function (data, status, headers, config) {
            $scope.userInfo.push(data);
            console.log("The user has been added successfully to the DB");
            console.log(data);
        })

        .error(function(data, status, headers, config) {
            console.log("Failed to add the user to DB");
        });
    }

    /** function to get info of user added in mysql referencing php **/
    $scope.get_user = function() {
        $http.get('db.php?action=get_user').success(function(data)
        {
            $scope.userInfo = data;   
            console.log("You were succesfull in show user info"); 
            //console.log(data);
        })
    }

    });

Answer 1

As you are doing post call which is saving data to DB through server method, but in you success of post call you are pushing that data in userInfo object which technically sounds wrong.

I'd prefer you to make an ajax to get new data from db using $scope.get_user() after post call gets succeed.

Code

$scope.save_user = function() {
    $http.post('db.php?action=add_user', {
       'user_name'  : $scope.user_name, 
       'user_email' : $scope.user_email
    }).success(function (data, status, headers, config) {
       //$scope.userInfo.push(data); //remove this line
        $scope.get_user(); //this will fetch latest record from DB
        console.log("The user has been added successfully to the DB");
        console.log(data);
    }).error(function(data, status, headers, config) {
        console.log("Failed to add the user to DB");
    });
}

Answer 2

Try changing save user to this:

$scope.save_user = function() {
    $http.post('db.php?action=add_user', {
        'user_name'  : $scope.user_name, 
        'user_email' : $scope.user_email
    })
    .success(function (data, status, headers, config) {
        $scope.userInfo.push(data.data);
        console.log("The user has been added successfully to the DB");
        console.log(data);
    })
    .error(function(data, status, headers, config) {
        console.log("Failed to add the user to DB");
    });
}

I think your data that you are returning is an object and whatever data you are expecting would be data.data, so you are pushing an invalid object to your userInfo array