fix(ngValue): set value property and attribute instead of setting attribute only

input element reads the value from value property and override the value attribute so we need to set both

Closes #14031
Closes #13984

BREAKING CHANGE:

NgValue is no longer updating the "value attribute" only when the model change,
because input element reads the value from "value attribute" only in case of "value property" has no value
but when "value property" changed the input element will stop reading the value from "value attribute" and
read it form the "value property".
so the input value in the gui will not equal the value of the model, becuase the model update the "value attribute" only.

Now ngValue updates both of "value attribute" and "value property" when the model change
This shouldn't affect any application becuase this is a bug and input value in the gui should be updated when the model change

Author: m-amr

src/ng/directive/input.js

@@ -1701,6 +1701,11 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
  * so that when the element is selected, the {@link ngModel `ngModel`} of that element is set to
  * the bound value.
  *
+ * It can be used to achieve one-way binding of a given expression to the value of
+ * {@link input `input`}. so that when the expression change
+ * the element is set to the bound value.
+ *
+ *
  * `ngValue` is useful when dynamically generating lists of radio buttons using
  * {@link ngRepeat `ngRepeat`}, as shown below.
  *
@@ -1711,7 +1716,7 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
  *
  * @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">
@@ -1750,24 +1755,33 @@ var CONSTANT_VALUE_REGEXP = /^(true|false|\d+)$/;
     </example>
  */
 var ngValueDirective = function() {
+  //helper function
+  var updateElementValue = function(element, attr, value) {
+    /**
+     *  input use 'value attribute' as default value if 'value property has no value'
+     *  but once set the 'value property' it will not read value from 'value attribute'
+     *  so we set both the value attribute and property here to avoid this problem.
+     */
+    attr.$set('value', value);
+    element.prop('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

@@ -3046,6 +3046,22 @@ describe('input', function() {
       expect(inputElm[0].getAttribute('value')).toBe('something');
     });
 
+    they('should update the $prop "value" property and attribute after change the "value" property', {
+      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">' +