angularjs - Form not adding to array and clearing -

in controller, have simple array , function:

$scope.newguarantor = ''; $scope.guarantors = [     {guarantor: 'peter parker'},     {guarantor: 'bruce wayne'} ];  $scope.addguarantor = function(){     $scope.guarantors.push({         guarantor: $scope.newguarantor     });     $scope.newguarantor = ''; }; 

in view have simple list , form:

<tr ng-repeat="pg in guarantors">     <td>{{pg.guarantor}}</td> </tr> <tr>     <td>        <form ng-submit="addguarantor()">           <input type="text" ng-model="newguarantor"/>           <button type="submit">                <span class="glyphicon glyphicon-plus"></span>           </button>        </form>     </td>  </tr> 

according read, should able type value input , click button , value of input should added listed array , form cleared.

instead, getting empty row being inserted list , value remains in input.

can see missed?

not sure why worked changed controller , works

$scope.newguarantor = {}; $scope.addguarantor = function() {     $scope.guarantors.push($scope.newguarantor);         $scope.newguarantor = {};     }; 

the view changed to:

<tr ng-repeat="pg in guarantors">                     <td>{{pg.guarantor}}</td>                 </tr>                 <tr>                     <td>                         <form ng-submit="addguarantor()">                             <input type="text" ng-model="newguarantor.guarantor"/>                             <button type="submit">                         <span class="glyphicon glyphicon-plus"></span>                             </button>                         </form>                     </td>                 </tr>