Angular : Update scope from factory not working

Question

I have a factory :

simuApp.factory('Incendie', function($http) {

    return {
        // liste des incendies
        incendies : [],

        // fonction pour récupérer la liste des incendies
        getListeIncendies : function() {

            $http.get(site_url+'gestionnaireFeu/listeIncendies').
            success(function(data, status, headers, config) {
                // si liste retournée, on enregistre
                incendies = data;
                return data;
            }).
            error(function(data, status, headers, config) {
                console.log("Un problème est survenu. (service incendie : getListeIncendies).");
            });
        },

        // fonction pour supprimer un incendie donné
        supprimerIncendie : function(IDIncendie) {
            $http.get(site_url+'gestionnaireFeu/supprimerIncendie/'+IDIncendie).
            success(function(data, status, headers, config) {
                // si liste retournée, on enregistre
                this.incendies = data;
            }).
            error(function(data, status, headers, config) {
                console.log("Un problème est survenu. (service incendie : supprimerIncendie).");
            });
        },

        // fonction pour ajouter un incendie
        ajouterIncendie : function(newIDIncendie) {
            $http.get(site_url+'gestionnaireFeu/creerIncendie/'+newIDIncendie).
            success(function(data, status, headers, config) {
                // si liste retournée, on enregistre
                incendies = data;
            }).
            error(function(data, status, headers, config) {
                console.log("Un problème est survenu. (service incendie : ajouterIncendie).");
            });
        }
    }

});

And also a controller :

simuApp.controller('incendieController', function($scope, $http, Incendie) {

    // liaison du scope avec le service incendie
    //$scope.incendies         = Incendie.incendies;

    $scope.incendies         = Incendie.getListeIncendies();

    $scope.updateIncendies = function() {
        $scope.incendies = Incendie.getListeIncendies();
    }

    // $scope.getListeIncendies = Incendie.getListeIncendies();
    // $scope.ajouterIncendie   = Incendie.ajouterIncendie();
    // $scope.supprimerIncendie = Incendie.supprimerIncendie();

}); 

My view is not updated and still, the ajax call is ok. (checked with firebug, i have the json returned).

Here's the code of my view :

<div ng-controller="incendieController">
    TEST
    <div ng-repeat="incendie in incendies">
        incendies : {{ incendie.idFeu }}
    </div>
</div>

I don't have any error but my view only display "TEST".

Do you have any idea why ?

Thanks

Answer 1

your getListeIncendies should looks like this:

getListeIncendies : function() {
    var scope = this;
    return $http.get(site_url+'gestionnaireFeu/listeIncendies').
    success(function(data, status, headers, config) {
        // si liste retournée, on enregistre
        scope.incendies = data;
        return scope.incendies;
    }).
    error(function(data, status, headers, config) {
        console.log("Un problème est survenu. (service incendie : getListeIncendies).");
    });
},

Note var scope = this; and scope.incendies = data; Then in your controller

Incendie.getListeIncendies().then(function(response) {
    $scope.incendies = response;
});

Answer 2

You can't return from an AJAX call, it async! Instead, return the actual $http request and use .then and assign your data in the controller

getListeIncendies : function() {
    return $http.get(site_url+'gestionnaireFeu/listeIncendies').then(function(result) {
        // si liste retournée, on enregistre
        return result.data;
    }, function(err) {
        console.log("Un problème est survenu. (service incendie : getListeIncendies).");
    });
},

And your controller:

Incendie.getListeIncendies().then(function(data) {
    $scope.incendies = data;
});