Textarea имеет избыточные пространства после привязки к модели AngularJS

Question

Я использую angularjs для создания SPA.

После нажатия кнопки OK мой объект будет сериализован в строку JSON и будет отображаться внутри элемента управления textarea.

Вот мой код:

• 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> 
  

• Часть моего JS кода:

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

Но, наконец, я получил это :

У меня избыточное пространство внутри моего текстового поля.

Может ли кто-нибудь помочь мне решить эту проблему?

Я использую

• JQuery 2.2.1
• AngularJs 1.5.0