Update model with $http using a service not triggering model change

Question

I have the following model:

 var MODEL = { myTable: [], anotherTable: [] }; //--- initially set as empty arrays

MODEL is a global variable as it is used to bind the app model in different controllers.

I have devined a service that updates the model, getting the data from a php page that returns the table rows:

myApp.factory('myAppUtils', function($http) {
     return {
            updateModelTable: function(tableName) {
                var pageToCall = "";
                var params = "";
                switch(tableName){
                    case 'myTable':
                        pageToCall = "myTable.php";
                        params = "";
                        break;
                    case 'anotherTable':
                        break;
                    default:
                        break;
                }

                var updateModel = function(tableName, data){
                    MODEL[tableName] = data;
                };

                var url = "/" + pageToCall;
                $http.get(url).
                    success(function(data, status, headers, config) {
                        updateModel(tableName, data);
                    }).
                    error(function(data, status, headers, config) {
                        alert("error");
                    });
            }
        };
});

and then one of the controllers:

myApp.controller("MyTableCtrl", function($scope, myAppUtils){
    $scope.table = MODEL.myTable;
    myAppUtils.updateModelTable("playersTable");
});

once I run the app, the myAppUtils.updateModelTable() function is correctly invoked, it does update successfully the MODEL but the view controlled by MyTableCtrl does not update accordingly.

What I'm trying to do is to set up some sort of CRUD operations, getting and setting values from a sql db. I'd like to, for example, insert a new record and then call the update function to update the model and consequently the view, but this is not happening.

Is this the correct "angular" way to do the thing?

Any hint? What am I doing wrong?

Thanks in advance

Answer 1

Instead of using a global variable to share data between controllers, you can use a separate service to cache data, as Angular Service is singleton.

So in your case, create a service

myApp.service('modelService',function() {
    var model = {
      myTable: [],
      anotherTable: []
    };

    return model;
});

Then in your factory, inject this service and change your updateModel to

var updateModel = function(tableName, data){
    modelService.myTable = data;
};

And in your controller, inject modelService and bind it to $scope as

$scope.model = modelService;

Finally, in your view, you can access model.myTable, which can be updated automatically once you update them in your factory.