Textarea has redundant spaces after binding with AngularJS model

Question

I'm using angularjs for making an SPA.

After clicking the OK button, my object will be serialized into a JSON string and be displayed inside a textarea control.

Here is my code:

• HTML :

  <div id="resultModal" class="modal fade" role="dialog">
      <div class="modal-dialog">
  
          <!-- Modal content-->
          <div class="modal-content">
              <div class="modal-header">
                  <button type="button" class="close" data-dismiss="modal">&times;</button>
                  <h4 class="modal-title">Result</h4>
              </div>
              <div class="modal-body">
                      <textarea class="form-control"
                                readonly="readonly"
                                rows="10">
                          {{serializedInfo}}
                      </textarea>
              </div>
              <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
              </div>
          </div>
  
      </div>
  </div>
  

• Part of my JS code:

  $scope.CreateFoodInfo = function (shownModal) {
                  $scope.serializedInfo = angular.toJson($scope.food);
                  $(shownModal).modal("show");
              }
  

But finally, I've got this :

I got redundant spaces inside my textarea.

Can anyone help me to solve this problem?

I'm using

• JQuery 2.2.1
• AngularJs 1.5.0

Answer 1

You have extra whitespace inside the textarea:

<textarea class="form-control"
    readonly="readonly"
    rows="10">{{serializedInfo}}</textarea>

With that said, you're probably better off with an ng-model

<textarea class="form-control"
        readonly="readonly"
        rows="10"
        ng-model="serializedInfo"></textarea>