How to add new row to table after submission using AngularJS, AJAX, and XML
<p>I am new to AngularJS and am trying to convert from JQuery to Angular. I know I am using JQuery snippet within .success but I highly doubt it'll work but this should give you an idea of what I am trying to do. I cannot seem quite figure out how to add new row to the table after the form submission. I was trying to keep adding new entry to the table but nothing works. If you know a good, simple snipped to get started, it will be greatly appreciated. Here's the code I have so far: </p>

<p>HTML:</p>

<pre><code>&lt;table id="tblLogEntry"&gt;
                &lt;tr id="tableheadings"&gt;
                    &lt;th class="dateCol dateSize"&gt;Date&lt;/th&gt;
                    &lt;th class="trainingCol"&gt;Training&lt;/th&gt;
                    &lt;th class="successCol successSize"&gt;Success?&lt;/th&gt;
                &lt;/tr&gt;
            &lt;/table&gt;
</code></pre>

<p>Angular: </p>

<pre><code>var logApp = angular.module('logApp', []);

logApp.controller('logController', ['$scope', '$http', function($scope, $http) {

    $scope.statuses = [
        {value:'Yes'},
        {value:'No'}
    ];

    $scope.logData = {};

    $scope.processLog = function(isValid) {

        if (isValid) {            
            $scope.isProcessing = true;
            $http({
                method: 'POST',
                url: 'LogEntryFile.php',
                data: $.param($scope.logData),
                headers: {'Content-Type': 'application/x-www-form-urlencoded'}
            })
                    .success(function(data) {
                        var parser = new DOMParser();
                        var parsedXML = parser.parseFromString(data, "text/xml");
                        var today = parsedXML.getElementsByTagName("today")[0].childNodes[0].nodeValue;
                        var log = parsedXML.getElementsByTagName("log")[0].childNodes[0].nodeValue;
                        var status = parsedXML.getElementsByTagName("status")[0].childNodes[0].nodeValue;
                        $('#tableheadings').after('&lt;tr&gt;\n\
                            &lt;td&gt;' + {{ logData.today }} + '&lt;/td&gt;\n\
                            &lt;td&gt;' + {{ logData.log }} + '&lt;/td&gt;\n\
                            &lt;td&gt;' + {{ logData.status }} + '&lt;/td&gt;&lt;/tr&gt;');
            });
        }

    };

    $scope.clearFields = function() {
        $scope.logData = "";
    };

}]);
</code></pre>

<p>LogEntryFile.php:</p>

<pre><code>$log = new Log();

$log-&gt;dateoflog = $_POST["today"];
$log-&gt;training = $_POST["log"];
$log-&gt;success = $_POST["status"];

$isLogValid = $log-&gt;validateLog();

if ($isLogValid) {    
   insertLog($log-&gt;dateoflog, $log-&gt;training, $log-&gt;success);

echo ('&lt;logentry&gt;'
        . '&lt;today&gt;' . $log-&gt;dateoflog . '&lt;/today&gt;'
        . '&lt;log&gt;' . $log-&gt;training . '&lt;/log&gt;'
        . '&lt;status&gt;' . $log-&gt;success . '&lt;/status&gt;'
        . '&lt;/logentry&gt;');
} else {
    header("Location: index.php");
}
</code></pre>