AngularJS bind a value in a factory to a controller

Question

I am trying to link two controllers via a factory. I want to set up a pointer in one controller to a value myFactoryVar on the factory so that when the value in the factory changes, the value controllerVar in the controller changes. I've read this post and several like it AngularJS : The correct way of binding to a service properties but I can't seem to make it work with my code. Maybe it's the format? Maybe I'm binding to a primitive type without meaning to. Here is what I've got so far, any idea how to make it work as intended?

Controller 1:

;(function() {
    'use strict';

    angular
        .module('myapp')
        .controller('MyCtrl1', MyCtrl1);

    function MyCtrl1(myTracker) {

        var vm = this;

        angular.extend(vm, {
            controllerVar: myTracker.myFactoryVar,
            myTrackerVarIncrement: myTrackerVarIncrement

        });

        function myTrackerVarIncrement() {
            myTracker.myFactoryVarIncrement();
            /* should log the same value as myFactoryVar but doesn't */
            console.log(vm.controllerVar);
        }
    }
})();

Controller 2:

;(function() {
    'use strict';

    angular
        .module('myapp')
        .controller('MyCtrl2', MyCtrl2);

    function MyCtrl2(myTracker) {
        var vm = this;

        angular.extend(vm, {
            myTrackerVarIncrement: myTrackerVarIncrement
        });


        function myTrackerVarIncrement() {
            /* I want to be able to increment the value in the factory, */
            /* and by means of that, the value in the other controller too */
            myTracker.myFactoryVarIncrement();
        }

    }
})();

Factory:

;(function() {
    'use strict';

    angular
        .module('myapp')
        .factory('myTracker', myTracker);

    function myTracker() {

        var factory = {
            myFactoryVar: 1,
            myFactoryVarIncrement: myFactoryVarIncrement
        };

        return factory;

        function myFactoryVarIncrement() {
            factory.myFactoryVar += 1;
        }

    }
})();

score 0 · Accepted Answer · answered Jan 25 '17 at 04:32

Maybe I'm binding to a primitive type without meaning to.

The myFactoryVar is a property of an object. Share the reference of the object of which it is a property.

;(function() {
    'use strict';

    angular
        .module('myapp')
        .controller('MyCtrl1', MyCtrl1);

    function MyCtrl1(myTracker) {

        var vm = this;

        angular.extend(vm, {
            //controllerVar: myTracker.myFactoryVar,
            controllerRef: myTracker,
            myTrackerVarIncrement: myTrackerVarIncrement

        });

        function myTrackerVarIncrement() {
            myTracker.myFactoryVarIncrement();
            /* should log the same value as myFactoryVar but doesn't */
            //console.log(vm.controllerVar);
            console.log(vm.controllerRef.myFactoryVar);
        }
    }
})();

Bind to the reference to share the contents.

This was it. Everything is working as expected now. Thank you. — JamesNB, Jan 25 '17 at 17:28

AngularJS bind a value in a factory to a controller

1 Answers1