javascript - Angularjs problems appending table -

i learning angularjs (i still fresh). trying add row table on button click. basing code tutorial - http://plnkr.co/edit/64e1ngnkc4vyyney6iqz?p=preview

my code appends content leaves out , tags , adding tags. furthermore, tried appending simple string 'test' , adds tags string...why add tags didn't include?

my html -

      <div ng-controller="growingtable">         <div ng-controller="incomecontroller">           <table class="table table-striped">             <tr>               <td>account</td>               <td>budget</td>               <td>%</td>               <td>enter amount</td>               <td>total</td>               <td>%</td>             </tr>             <tr>               <tr ng-repeat="r in rows">                 <td><input class="form-control" placeholder="account" ng-model="r.account"></td>                 <td><input class="form-control" ng-model="r.funding.startingestimate"y placeholder="budgeted"></td>                 <td class="warning">20%</td>                 <td>{{funding.needed}}</td>                 <td class="warning">$500</td>                 <td class="warning">50%</td>               </tr>             </table>             <button class="btn btn-primary"ng-click="addfield()">add field</button>           </div>         </div>       </div>     </div>   </div> </body> 

javascript -

var app = angular.module('myapp', []); app.controller('incomecontroller', function($scope) {  $scope.funding = { startingestimate: 0 };  computeneeded = function() { $scope.funding.needed = $scope.funding.startingestimate / 100; }; $scope.$watch('funding.startingestimate', computeneeded); });  app.controller('growingtable', function($scope){ $scope.rows = [];  $scope.addfield = function(){     $scope.rows.push({             }); }     });     

this code gets appending after row in table. happened table elements? , why add span tags??

<input class="form-control ng-scope" placeholder="account"> <input class="form-control ng-scope ng-pristine ng-valid" placeholder="budgeted" ng-model="funding.startingestimate"> <span class="ng-scope ng-binding">20%$50050%</span> 

thanks!

another way of doing create array in controller , ng-repeat generate table. way, 'add field' function need create new element on array , angular deal updating html you.

for example html be:

<div ng-app="app"> <div ng-controller="growingtable"> <table>     <tr ng-repeat="r in rows">         <td><input class="form-control" placeholder="account" ng-model="r.account"></td>         <td><input class="form-control" ng-model="r.startingestimate" placeholder="budgeted"></td>         <td class="warning">20%</td>         <td>{{r.needed}}</td>         <td class="warning">$500</td>         <td class="warning">50%</td>      </tr> </table>   <button ng-click="addfield()">add field</button>         <br>            {{rows}}  </div> 

and app like:

angular.module('app', []);  angular.module('app').controller('growingtable', function($scope){ $scope.rows = [];  $scope.addfield = function(){     $scope.rows.push({         account : '',         startingestimate : '',         needed : ''     }); }  }); 

you'll find working version http://jsfiddle.net/y53yd/