Set $modelvalue Without Changing $viewvalue

In angular 1.2 I need to be able to update the $modelValue without affecting the $viewValue. I want the internal value to be one value, while what the user sees to be another. Th

Solution 1:

When anything triggers the model to change, something like setter(scope, validate()); in the example above, it will trigger the $formatters to run. The $formatters are passed the $modelValue and can return a value that will be used for the $viewValue. Knowing this, you can use a simple function that just returns the $viewValue in the formatter. With this, updating the model programmatically will not affect the $viewValue, and thus not change the value that appears in <inputs>

ctrl.$formatters.push(formatter)

functionformatter(modelValue){
    return ctrl.$viewValue;
}

For the example in the question, you would want to return the $viewValue only when the $modelValue is undefined. For that you can use this:

ctrl.$formatters.push(formatter)

functionformatter(modelValue){
    return modelValue === undefined? ctrl.$isEmpty(ctrl.$viewValue)? undefined : ctrl.$viewValue : modelValue;
}

Working example: http://jsfiddle.net/TheSharpieOne/q1s7Lf7z/17/