angularjs not refreshing table

Question

i have some problems trying to re-render the model of a table, when i update a item inside of this table y call to a http api that will edit that item and then, when callback is executed it will call to the same api to get the refreshed list of items, actually it works fine, but the only problem that is not refreshing the table with the new info.

For what i know, http request takes care of $apply, but it's kind of confuse

here i the table where i have a ng-repeat for every item in the list that i got:

<table cellspacing="0" class="table table-small-font table-bordered table-striped">
                        <thead>
                            <tr>
                                <th data-i18n="_maintainer_devices_table_devices_column_code"></th>
                                <th data-i18n="_maintainer_devices_table_devices_column_type"></th>
                                <th data-i18n="_maintainer_devices_table_devices_column_status"></th>
                                <th data-i18n="_maintainer_devices_table_devices_column_action"></th>
                            </tr>
                        </thead>
                        <tbody class="middle-align">
                            <tr ng-repeat="(key, value) in devicesList">
                                <td>{{value.code}}</td>
                                <td>{{value.type.name}}</td>
                                <td>{{value.status.name}}</td>
                                <td ng-controller="UIModalsCtrl">
                                    <button class="btn btn-icon btn-white btn-xs">
                                        <i class="fa fa-truck"></i>
                                    </button>
                                    <button class="btn btn-icon btn-white btn-xs" ng-click="openModal('maintainer_modal', 'md','',{'title': 'Edit','action': 'edit'},value);" tooltip="Tooltip on bottom" tooltip-placement="bottom">
                                        <i class=" fa fa-pencil"></i>
                                    </button>
                                    <button class="btn btn-red btn-icon btn-icon-standalone btn-xs" ng-click="openModal('confirm_modal', 'md','',{'title': 'Delete','action': 'delete'},value);">
                                        <i class="fa fa-trash-o"></i>
                                        <span data-i18n="_button_delete"></span>
                                    </button>
                                </td>
                            </tr>
                        </tbody>
                    </table>

---

deviceService.js

traceItServices.service('$deviceMaintainer', function($http) {
var call = function(data, action, callback) {
    var url = 'http://171.16.0.4:1337/maintainer/devices/' + action;
    showLoadingBar({
        pct: 100,
        delay: 1,
        before: function(pct) {
            $http.post(url, data).success(function(data, status, headers, config) {
                callback(data);
            });
        }
    });
};

this.get = function(data, callback) {
    call(data, 'get', function(data) {
        callback(data);
    });
}

this.update = function(data, callback) {
    call(data, 'update', function(data) {
        callback(data);
    });
}

...

---

deviceController.js

 traceitApp.controller('devicesCtrl', ['$scope', '$rootScope', '$http', '$timeout', '$messages', '$deviceMaintainer', '$translator',
    function($scope, $rootScope, $http, $timeout, $messages, $deviceMaintainer, $translator) {
        .......
        $scope.getUserDevices = function() {
            var data = {
                user_id: $rootScope.userInfo.userId
            };

            $deviceMaintainer.get(data, function(dataOut) {
                var list = JSON.parse(dataOut.response).devices.device;
                list = $translator.translateDevicesList(list);
                $timeout(function() {
                    $scope.devicesList = list;
                }, 1)

            });
        };

        $scope.updateDevice = function() {
            var data = {
                device_code: $scope.device_code,
                device_type_id: $scope.device_type_id,
                device_id: $scope.device_id
            };

            $deviceMaintainer.update(data, function(dataOut) {
                try {
                    var res = JSON.parse(dataOut.response);
                    if (res.result.id > 0) {
                        $messages.success($translator.localize.getLocalizedString('_message_success'));
                    }

                    $scope.getUserDevices();

                } catch (e) {
                    console.log(e.message);
                }
            });
        };
    }
]);

---

Thanks in advance.

Answer 1

Actually, you're even using $timeout. According to Angular $scope.$apply vs $timeout as a safe $apply this triggers an $apply after the current digest, too.

So, the rendering looks good. Are you sure, that you really have new data? I guess you've debugged the callbacks already.

Answer 2

I found that, i was using $scope.devicesList = list and for some reason it didn't update it, but instead, i used $rootScope.devicesList = list and suddenly, it worked.. now when i change anything and update, it refresh...

thanks guys =)

---

UPDATE:

I figured out why it wasnt working, the thing is , i called to the deviceCtrl->update from a modal, and the modal is , so, this same dialog has a diferent scope of the deviceCtrl, so when i updated the list, it didnt change cuz it wasnt in the same scope, so, to fix it, i had to add a variable in the modal controller, that contains the parent of it.

var parent = $scope.$parent; ($scope injected in the modal controller).

this way parent is going to be the deviceCtrl original scope.

so that fixed it, was hard to figured out, reading and reading i came up with this. thank all.