angular, try to display object in ng-repeat fails

Question

i'm writing an mobile application in javascript with angularJS and ionicframework (last beta v.11), i create dinamically an object and want to display all objects inside in a ng-repeat. Why nr-repeat don't display anything? This is screen from my object:

enter image description here

I use this code for put values in scope:

$scope.distanceSuppliers = myCar;

And this is the code in html:

<ion-item ng-repeat="(id, supplier) in distanceSuppliers">
            <div class="items item-button-right" ng-click="openDetails(id)">
                {{supplier.name}}<br />
                {{supplier.address}}<br />
            </div>
        </ion-item>

This is my complete code for JS:

.controller('suppliers', function($scope, cw_db, $ionicPopup, $ionicActionSheet, appdelegate, $rootScope, $firebase, $location, $ionicLoading, cw_position) {

    $ionicLoading.show({
        template: 'Updating data..'
    });

    var geocoder;
    var tot = 0;
    var done = 0;
    geocoder = new google.maps.Geocoder();

    cw_db.getData(cw_db.getSuppliers(), "", function(suppliers) {

        cw_position.getPosition(function (error, position) {
            suppliers.on('value', function(supp) {
                $scope.distanceSuppliers = {};
                tot = 0;
                done = 0;
                supp.forEach(function(childSnapshot) {
                    tot++;
                    var childData = childSnapshot.val();
                    if (childData.address) {
                        calculateDistance(childData, position.coords.latitude, position.coords.longitude);
                    }
                });
            });
            $ionicLoading.hide();
        });
    });


    function calculateDistance(childData, usrLat, usrLon) {
        var service = new google.maps.DistanceMatrixService();
        service.getDistanceMatrix(
            {
              origins: [new google.maps.LatLng(usrLat, usrLon)],
              destinations: [childData.address],
              travelMode: google.maps.TravelMode.DRIVING,
              unitSystem: google.maps.UnitSystem.METRIC,
              avoidHighways: false,
              avoidTolls: false
            }, function(response, status) {
                if (status != google.maps.DistanceMatrixStatus.OK) {
                    alert('Error was: ' + status);
                } else {
                    done++;
                    var results = response.rows[0].elements;
                    childData.distance = results[0].distance.value;
                    $scope.distanceSuppliers.push(childData);
                    if (done == tot) {

                        console.log($scope.distanceSuppliers);
                    }
                }
            });
    }


    $scope.openDetails = function(index) {
        //appdelegate.setCallId(index);
        //$location.path("/app/supplierDetails");
    }

})

what's wrong?

Could you provide a jsfiddle or plunker that reproduces the problem? — Hugo Wood, Aug 19 '14 at 09:19
I dont see any error i create this plunker with your code and works well http://plnkr.co/edit/DImISksxS4YNsNol7H4P?p=preview — Jesús Quintana, Aug 19 '14 at 09:22
This is the link for jsfiddle: http://jsfiddle.net/htdjke30/1/ — Simone M, Aug 19 '14 at 09:49
the fiddle you provided is not valid, no controllers no structure or anything, please fix, and if this is the code you are using, structure in an angular way — Labib Ismaiel, Aug 19 '14 at 09:59
You are not even creating the Angular app in your fiddle. [Check this one](http://jsfiddle.net/bmleite/thyaspnp/) — bmleite, Aug 19 '14 at 09:59
@SimoneM I've already provided you a working example. Your fiddle does not work because it is wrongly configured. Use mine if you need to do any changes. — bmleite, Aug 19 '14 at 10:12
thx, my data starts from firebase snapshot, i have to add attribute to every child, and then show in ng-repeat without using firebase.. i think this is the problem.. — Simone M, Aug 19 '14 at 10:15
Solved! I need to use $scope.$apply(); when i ck for position using javascript gps function on callback i retrieve a different scope. Thx to all! — Simone M, Aug 19 '14 at 12:42

score 0 · Answer 1 · answered Aug 19 '14 at 10:32

Not sure, but I believe you have a data binding update problem.

Try using the $timeout to force the render:

w_position.getPosition(function (error, position) {
     $timeout(function() {
        suppliers.on('value', function(supp) {
            $scope.distanceSuppliers = {};
            tot = 0;
            done = 0;
            supp.forEach(function(childSnapshot) {
                tot++;
                var childData = childSnapshot.val();
                if (childData.address) {
                    calculateDistance(childData, position.coords.latitude, position.coords.longitude);
                }
            });
        });
        $ionicLoading.hide();
    }); 
});

And don't forget to add the $timeout parameter to the controller:

.controller('suppliers', function($scope, ...<other parameters here>..., $timeout) {

thx, i try it, but i don't think is a timeout problem, when i try to show in console distanceSuppliers it works, i think this mean all code is executed — Simone M, Aug 19 '14 at 11:20

score 0 · Answer 2 · answered Aug 19 '14 at 12:41

I found the problem! Fix using $scope.$apply();

The problem was that i was writing in a different $scope using this code:

cw_position.getPosition(function (error, position) {
            suppliers.on('value', function(supp) {
                tot = 0;
                done = 0;
                supp.forEach(function(childSnapshot) {
                    tot++;
                    var childData = childSnapshot.val();
                    if (childData.address) {
                        calculateDistance(childData, position.coords.latitude, position.coords.longitude);
                    }
                });
            });
            $ionicLoading.hide();           
        });

where cw_position.getPosition call a js with this code:

angular.module('cw_position', [])
.service('cw_position', function() {

    this.getPosition = function(callback) {
        navigator.geolocation.getCurrentPosition(
            function (position) {
                return callback(null, position);
            }, 
            function(error) {
                return callback(error, null);
            }
        );
    }


    //  Built google maps map option
    //
    this.getGoogleMapOptions = function (lat, lon, zoom, type) {
        if (type == null) {
            type = google.maps.MapTypeId.ROADMAP;
        }
        var mapOptions = {
            center: new google.maps.LatLng(lat, lon),
            zoom: zoom,
            mapTypeId: type
        };
        return mapOptions;
    }

});

navigator.geolocation.getCurrentPosition causes the 'problem'

Thx to all for your help

`$timeout` does the exact same thing... read [here](http://stackoverflow.com/q/23070822). — bmleite, Aug 19 '14 at 14:22

angular, try to display object in ng-repeat fails

2 Answers2