AngularJS: how to use a factory with two-way data binding

Question

EDIT: Working plunker: http://plnkr.co/edit/iInh7TnbGvSHSPOWuWPk?p=preview ==================================================================== In the following plunker: http://plnkr.co/edit/TIfkYE?p=preview A very simple example compares the usage of a factory and a service. Two way data-binding works using the service but not the factory. Why? With the service: ```

Accepted Answer

The problem is `var current` is a primitive and when you initialize the object using it as a value, it will not create a reference to intial variable, the object property will just take it's value.

WIthin your `isCurrent` function you are then making comparison to the original variable, which never changes. The `current` property however is changed by the 2 way binding you created with `ng-model`

Simple example ( can paste this in your browser console to confirm):

```
var current=0;
var obj={
  current: current
}

current=10;
alert(obj.current)// hasn't changed, is still 0
```

To fix your factory you need to make your comparisons to the object returned from factory

```
myApp.factory('fromFactory', function() {
  console.log("factory is called");
    var current = 0;
    return {
        current: current,
        isCurrent: function (nb) {

/* change return nb === current;*/

/* compare to the object version of "current" which is bound to ng-model*/
          return nb === this.current;
          },
        printCurrent: function () {
          console.log("print fromFactory", this.current);
        }
    };
});
```

AngularJS: how to use a factory with two-way data binding

Solution

Problem

Related problems