Binding variables from Service/Factory to Controllers

Question

I have a variable that will be used by one or more Controllers, changed by Services. In that case, I\'ve built a service that keeps this variable in memory, and share betwee

Answer 1

You can't bind variables. But you can bind variable accessors or objects which contain this variable. Here is fixed jsfiddle.

Basically you have to pass to the scope something, which can return/or holds current value. E.g.

Factory:

app.factory('testFactory', function(){
    var countF = 1;
    return {
        getCount : function () {

            return countF; //we need some way to access actual variable value
        },
        incrementCount:function(){
           countF++;
            return countF;
        }
    }               
});

Controller:

function FactoryCtrl($scope, testService, testFactory)
{
    $scope.countFactory = testFactory.getCount; //passing getter to the view
    $scope.clickF = function () {
        $scope.countF = testFactory.incrementCount();
    };
}

View:

    
    
 This is my countFactory variable : {{countFactory()}}

    
 This is my updated after click variable : {{countF}}

    Factory ++