Troubleshoot Angular Views when no error happens

Question

I am beginning to learn Angular, and I am having this issue. I am getting data from a web service using REST, then passing this data to the controller as data.d.results, I check in developer tools and results.length is 11, all is fine. I modified my html to include ng-app,ng-controller. My HTML for the Controller wrapper looks like this:

 <table ng-controller="ListsController as vm">
                        <thead>
                            <tr>
                                <td>Image</td>
                                <td>Product</td>
                                <td>Code</td>
                                <td>Available</td>
                                <td>Price</td>
                            </tr>
                        </thead>
                        <tbody>
                            <tr ng-repeat="product in vm.products">
                                <td>
                                    <img ng-src="{{product.ImageUrl.Url}}" title="{{product.Title}}" style="width: 50px;margin:2px;" />
                                </td>
                                <td>{{product.Title}}</td>
                                <td>{{product.ProductCode}}</td>
                                <td>{{product.ReleaseDate}}</td>
                                <td>{{product.Price | currency}}</td>
                            </tr>
                        </tbody>
                    </table>

and My controllerJS file looks like this:

(function () {
angular
    .module("sitemanagerapp")
    .controller("ListsController",
                ListsController);

function ListsController() {
    var vm = this;
    var getProducts = getAllItems('Products');
    getProducts
        .done(function (data, status, jqXHR) {
            vm.products = data.d.results;
        })
        .fail(function (jqXHR, status, error) {
            LogError(error);
        });
   }
}());

I am checking in developer tools, and at the end, vm.products is populated with the data from the service. But why my table isn't filled with the data? How can I troubleshoot problems related to it? No errors are shown for me or anything.

You put the parentheses in the last line in wrong order. It should be `})()` — Aetherus, Dec 25 '15 at 05:03
It's a function expression, IFFE. I don't think it's wrong.. — Natalie, Dec 25 '15 at 05:04
My problem isn't with IFFE, it's with refreshing data after getting response from async service. As I said, I got the data back to the vm.products. It's just not updating the UI. I can't use vm.$apply(), how do I use $apply in my case. thanks — Natalie, Dec 25 '15 at 05:20

score 0 · Answer 1 · answered Dec 25 '15 at 06:03

I suppose your getProducts is not implemented with angular's $http or $resource.
In such case, to achieve your goal, you have to inject $scope into your controller even though you are using controllerAs syntax.

(function () {
angular
    .module("sitemanagerapp")
    .controller("ListsController",
                ['$scope', ListsController]);

function ListsController($scope) {
    var vm = this;
    var getProducts = getAllItems('Products');
    getProducts
        .done(function (data, status, jqXHR) {
            vm.products = data.d.results;
            $scope.$apply();
        })
        .fail(function (jqXHR, status, error) {
            LogError(error);
        });
   }
})();

Troubleshoot Angular Views when no error happens

1 Answers1