Set model value programmatically in Angular.js

Question

I'm an author of angular-input-modified directive.

This directive is used to track model's value and allows to check whether the value was modified and also provides reset() function to change value back to the initial state.

Right now, model's initial value is stored in the ngModelController.masterValue property and ngModelController.reset() function is provided. Please see the implementation.

I'm using the following statement: eval('$scope.' + modelPath + ' = modelCtrl.masterValue;'); in order to revert value back to it's initial state. modelPath here is actually a value of ng-model attribute. This was developed a way back and I don't like this approach, cause ng-model value can be a complex one and also nested scopes will break this functionality.

What is the best way to refactor this statement? How do I update model's value directly through the ngModel controller's interface?

Answer 1

The best solution I've found so far is to use the $parse service in order to parse the Angular's expression in the ng-model attribute and retrieve the setter function for it. Then we can change the model's value by calling this setter function with a new value.

Example:

function reset () {
  var modelValueSetter = $parse(attrs.ngModel).assign;
  modelValueSetter($scope, 'Some new value');
}

This works much more reliably than eval().

---

If you have a better idea please provide another answer or just comment this one. Thank you!