fix(ngValue): set the element's value property in addition to the value attribute

Input elements use the value attribute as their default value if the value property is not set.
Once the value property has been set (by adding input), it will not react to changes to
the value attribute anymore. Setting both attribute and property fixes this behavior, and
makes it possible to use ngValue as a one-way bind.

Closes #14031
Closes #13984

POSSIBLE BREAKING CHANGE:

`ngValue` now also sets the value *property* of its element. Previously, it would only set the
value *attribute*. This allows `ngValue` to be used as a one-way binding mechanism on `input[text]`
and `textarea` elements without `ngModel`. Previously, these input types would not update correctly
when only the value attribute was changed.
This change should not affect any applications, as `ngValue` is mainly used on `input[radio]` and
`option` elements, both of which are unaffected by this change.

Author: m-amr

src/ng/directive/input.js

@@ -1970,9 +1970,12 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
  * Likewise, `ngValue` can be used to set the value of `<option>` elements for
  * the {@link select `select`} element.
  *
+ * It can further be used to achieve one-way binding of a given expression to an input element that
+ * does not use ngModel.
+ *
  * @element input
  * @param {string=} ngValue angular expression, whose value will be bound to the `value` attribute
- *   of the `input` element
+ * and `value` property of the element
  *
  * @example
     <example name="ngValue-directive" module="valueExample">
@@ -2011,22 +2014,33 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
     </example>
  */
 var ngValueDirective = function() {
+  /**
+   *  inputs use the value attribute as their default value if the value property is not set.
+   *  Once the value property has been set (by adding input), it will not react to changes to
+   *  the value attribute anymore. Setting both attribute and property fixes this behavior, and
+   *  makes it possible to use ngValue as a sort of one-way bind.
+   */
+  function updateElementValue(element, attr, value) {
+    element.prop('value', value);
+    attr.$set('value', value);
+  }
+
   return {
     restrict: 'A',
     priority: 100,
     compile: function(tpl, tplAttr) {
       if (CONSTANT_VALUE_REGEXP.test(tplAttr.ngValue)) {
         return function ngValueConstantLink(scope, elm, attr) {
-          attr.$set('value', scope.$eval(attr.ngValue));
+          var value = scope.$eval(attr.ngValue);
+          updateElementValue(elm, attr, value);
         };
       } else {
         return function ngValueLink(scope, elm, attr) {
           scope.$watch(attr.ngValue, function valueWatchAction(value) {
-            attr.$set('value', value);
+            updateElementValue(elm, attr, value);
           });
         };
       }
     }
   };
 };
-

test/ng/directive/inputSpec.js

@@ -3784,6 +3784,22 @@ describe('input', function() {
       expect(inputElm[0].getAttribute('value')).toBe('something');
     });
 
+    they('should update the $prop "value" property and attribute after the bound expression changes', {
+      input: '<input type="text" ng-value="value">',
+      textarea: '<textarea ng-value="value"></textarea>'
+    }, function(tmpl) {
+      var element = helper.compileInput(tmpl);
+
+      helper.changeInputValueTo('newValue');
+      expect(element[0].value).toBe('newValue');
+      expect(element[0].getAttribute('value')).toBeNull();
+
+      $rootScope.$apply(function() {
+        $rootScope.value = 'anotherValue';
+      });
+      expect(element[0].value).toBe('anotherValue');
+      expect(element[0].getAttribute('value')).toBe('anotherValue');
+    });
 
     it('should evaluate and set constant expressions', function() {
       var inputElm = helper.compileInput('<input type="radio" ng-model="selected" ng-value="true">' +