Angular.js - ng-repeat not showing updated array

Question

I have got code that reads the data from the array perfectly when I use a AJAX request. When I push an object to the array however, ng-repeat doesn't render the new row and I have to refresh the page to then fetch the data that was sent to server.

Why does it do this? Thanks

Javascript

function processError() {
        var responseCode = 404;
        var error = {};
        error["client"] = document.getElementById('client').value;
        error["errorMessage"] = document.getElementById('error-message').value;
        error["simpleRes"] = document.getElementById('simple-fix').value;
        error["fullRes"] = document.getElementById('full-fix').value;
        error["reason"] = document.getElementById('reason').value;

        var errorJson = JSON.stringify(error);

        $.ajax({
            url: "../ErrorChecker/rest/error",
            type: "POST",
            data: errorJson,
            contentType: "application/json"
        })
            .done(function (data, statusText, xhr, displayMessage) {
                $('.form').hide();
                responseCode = xhr.status;
                reloadData(data);
            });

        function reloadData(data) {
            if (responseCode == 200) {
                processPositiveResponse(data);
            } else {
                $('#negative-message').show(1000);
            }
        }
    }

function processPositiveResponse(data) {
        $('#positive-message').show(1000);
        updateTable(data);
        $('#errorTable').DataTable().destroy();
        setupTable();
        clearInputs();
        console.log($scope.controller.errors);
    }

function updateTable(data) {
        $scope.controller.errors.push({
            "id": data,
            "client": document.getElementById('client').value,
            "errorMessage": document.getElementById('error-message').value,
            "simpleRes": document.getElementById('simple-fix').value,
            "fullRes": document.getElementById('full-fix').value,
            "reason": document.getElementById('reason').value
        })
    }

HTML

<tbody>
    <tr ng-repeat="x in dataCtrl.errors">
        <td class="collapsing">
            <div class="ui toggle checkbox">
                <input type="checkbox">
                <label></label>
            </div>
        </td>
        <td style="display: none">{{ x.id }}</td>
        <td>{{ x.client }}</td>
        <td>{{ x.errorMessage }}</td>
        <td>{{ x.simpleRes }}</td>
        <td>{{ x.fullRes }}</td>
        <td>{{ x.reason }}</td>
    </tr>
</tbody>

Answer 1

That's because you're using jQuery and Angular together. Don't do that. EVER. Angular is not aware of what jQuery is doing, and jQuery is not aware of what Angular is generating in the DOM. Solution : REMOVE jQuery and use Angular's own $http service.

The same way, don't use document.getElementById('full-fix').value . You're taking Angular backwards. Angular generates the DOM from data, so you don't need to select DOM elements to read their value because that value is already in your data.

Answer 2

Update the document. Use scope apply as a quick fix. Not the way to do it imo. But it will solve your problem fast. On my mobile if I do not forget ill update this comment later with more details and best practises. For now a google search to scope apply will help you a long way.