How to add and remove text field on click of a button in angular js

You don't want to manipulate the DOM within your controller. Often times, there are better ways to do this within the framework that Angular provides.

You can do this by having another ng-repeat which loops over an array you declare within your controller. For example:

In your view:

<section id="paidby" ng-repeat="textfield in textfields">
  <div class='row' style='padding:2px'>
    <div class='col-sm-4'>
      <input type='number' placeholder="{{textField.str}}" ng-model="textField.value">
    </div>
  </div>
</section>

In your controller, within your button ng-click logic:

// To add:
$scope.textFields.push({ str: someVariable, value: someValue });

// To remove:
var index = $scope.textFields.map(function(t) { return t.value; }).indexOf(someValue);
if (index !== -1) {
  $scope.textFields.splice(index, 1);
}

Try hiding the inputs to start with, then show them if the appropriate button is clicked:

<script src= "http://ajax.googleapis.com/ajax/libs/angularjs/1.3.14/angular.min.js"></script>

<div ng-app="" ng-init="array=['one','two','three','four','five']; show=[false,false,false,false,false]">

<button ng-repeat="item in array" ng-click="show[$index] = !show[$index]">{{item}}</button>
<br>
<input type="text" ng-repeat="item in array" placeholder="{{item}}" ng-if="show[$index]" />

</div>