angularjs - How to add rows in a table with a button -

i'm having issues on adding rows in table using button.

here html(note have 2 elements same custom directive, sure works):

<input class="form-control" id="dispatcherpod" ng-model="pod.pod"> <exa-datepicker model="pod.startdate" required="true"disabled="true" min-mode="day"id="podstartdate"                                 format="yyyy-mm-dd" readonlydata="false"></exa-datepicker> <exa-datepicker model="pod.enddate" required="true" disabled="true"                                 min-mode="day" id="podenddate" format="yyyy-mm-dd"                                 readonlydata="false"></exa-datepicker> <button type="button" class="btn btn-primary pull-right"                                 ng-click="puntualadd()">{{'puntual_add' | translate}}</button> 

here js:

$scope.puntualadd = function (){                     if($scope.pod.pod == undefined || $scope.pod.pod == null){                         $scope.errorpod=true;                         $scope.errormessage.push("field_required_pod");                     }                     if($scope.pod.startdate == undefined || $scope.pod.startdate == null){                         $scope.errorstartdate=true;                         $scope.errormessage.push("field_required_startdate");                     }                     if($scope.pod.enddate == undefined || $scope.pod.enddate == null){                         $scope.errorenddate=true;                         $scope.errormessage.push("field_required_enddate");                     }                     if($scope.errormessage.length==0){                         $scope.puntualsupply={};                         $scope.puntualsupply.supply_code=$scope.pod.pod;                         $scope.puntualsupply.start_date= $scope.pod.startdate.tostring();                         $scope.puntualsupply.end_date= $scope.pod.enddate.tostring();                         $scope.puntualsupply.state= "null";                         $scope.inssupplies.push($scope.puntualsupply);                     }                  } 

and here have table shows data :

<table class="table" ng-controller="spotdispatchercontroller">                         <thead>                             <tr>                                 <th class="col-order">{{'pod' | translate}}</th>                                 <th class="col-order">{{'customer_denomination'| translate}}</th>                                 <th class="col-order">{{'vat_number'| translate}}</th>                                 <th class="col-order">{{'start_date'| translate}}</th>                                 <th class="col-order">{{'end_date'| translate}}</th>                                 <th class="col-order">{{'state'| translate}}</th>                                 <th class="colf-cmd"></th>                                 <th class="col-order">{{'error_description'| translate}}</th>                             </tr>                         </thead>                         <tbody>                              <tr ng-repeat="row in inssupplies">                                 <td>{{row.supply_code}}</td>                                 <td>wip</td>                                 <td>wip</td>                                 <td>{{row.start_date}}</td>                                 <td>{{row.end_date}}</td>                                 <td>{{row.state}}</td>                                 <td class="colf-cmd">                                     <div class="form-group">                                         <div class="form-btn-container text-center">                                             <button type="button" class="btn btn-primary"                                                 ng-click="deleterecord()">x</button>                                         </div>                                     </div>                                 </td>                                 <td>{{row.state}}</td>                             </tr>                         </tbody>                     </table> 

note have previous data being shown in table, , want add other, when that, $scope.inssupplies take data wrote in inputs, doesn't show in table

no errors given, not in console, , i'm trying achieve without <a> tag

here plunkr of code.

edit: instead of downvoting, tell me how improve question

your issue have ng-controller twice. need once on <body>. also, changed code you're passing in value want use puntualadd() function. it's better practice , overall makes more sense. hope helps!

html:

<body  ng-controller="spotdispatchercontroller">   <ng-form>     <div class="form-inline">       <div class="row">         <div class="form-group">           <label title="pod" for="dispatcherpod">pod</label>           <input class="form-control" id="dispatcherpod" ng-model="pod.pod">         </div>       </div>     </div>     <button type="button" class="btn btn-primary pull-right" ng-click="puntualadd(pod.pod)">puntual_add</button>       <div class="table-responsive">         <table class="table">           <thead>             <tr>               <th class="col-order">pod</th>               <th class="col-order">denomination</th>               <th class="col-order">vat_number</th>               <th class="col-order">state</th>               <th class="colf-cmd"></th>               <th class="col-order">error_description</th>             </tr>           </thead>           <tbody>             <tr ng-repeat="row in inssupplies">               <td>{{row.supply_code}}</td>               <td>wip</td>               <td>wip</td>               <td>{{row.state}}</td>               <td class="colf-cmd">                 <div class="form-group">                   <div class="form-btn-container text-center">                     <button type="button" class="btn btn-primary" ng-click="deleterecord()">x</button>                   </div>                 </div>               </td>               <td>{{row.state}}</td>             </tr>           </tbody>         </table>       </div>     </div>   </ng-form> </body> 

javascript:

var app = angular.module('plunker', []);   app.controller('spotdispatchercontroller', ['$scope',      function($scope) {       $scope.inssupplies = [];       $scope.pod = [];       $scope.puntualadd = function(input) {         $scope.inssupplies.push({           id: null,           dispatch_id:null,           supply_code: input,           magnitude:null,           stat: "null",           state_desc: null,           start_date_val: null,           end_date_val: null,           ext_date: null,           aut_mod: null,           date_mod: null         });         };     }   ]); 

working code: plunkr