Ng-model hides uploaded data from the server in input, how to fix it?

Question

Angular

Hello everyone, here is the input code:

<input class="form-control ng-pristine ng-invalid ng-invalid-required ng-valid-minlength ng-valid-maxlength ng-touched" ng-model="title" required="required" ng-minlength="3" ng-maxlength="250" name="title" type="text" value="'First place is where I like to be': Shaquille O'Neal is a Northampton Town fan" id="title">

in the value attribute, the value is from the server and, as you can already see, it is not empty, but in the browser, the input not only displays nothing, but the validation fails, there is nothing in $scope.title

Answer 1

To make the fields use the value from the value attribute , you can write the following directive:

.directive('useFormData', function ($parse) {
    return {
      link: function (scope, element, attrs) {
        if (attrs.ngModel && attrs.value) {
          $parse(attrs.ngModel).assign(scope, attrs.value);
        }
      }
    };
});

Then just give the elements you need the use-form-data attribute :
View example