angularjs - angular form ng-repeat deleting single form -

i working dynamic forms ng-repeat .i getting dynamic forms according userid. each form has delete button. requirement once clicking delete button need delete particular form , values user obj , remaining values need send server. in example want delete id 2 (2nd form), , 1st , 2nd form data need store 1 variable. please send fiddle .

my html code

<div ng-app="myapp"> <div ng-controller="myctrl">     <form role="form" name='userform' novalidate>         <div class="container">             <div class="row" ng-repeat="user in users">                 <div class="form-group">                     <div class="col-md-3">                         <label>id</label>                         <input ng-model="user.id" id="user.id" name="user.id" placeholder="enter bugid" type="text" required readonly disabled>                     </div>                      <div class="col-md-3">                         <label>comments</label>                         <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>                     </div>                      <div class="col-md-3 ">                         <label>location</label>                          <select ng-model="user.location" ng-options="v v in locations" ng-init='initlocation(user)' name="select2" required>                          </select>                     </div>                     <div>                         <button>delete</button>                     </div>                 </div>             </div>         </div>          <div class="buttoncontainer text-center btn-container">             <br>             <button ng-disabled="userform.$invalid" type="button" id="adduser" ng-click="adduser()">add user</button>             <button type="button" class="btn button--default btn--small pull-center">close</button>         </div>     </form>  </div> 

js file

var myapp = angular.module('myapp', []);  myapp.controller('myctrl', function($scope, $timeout) { $scope.ids = [1, 2, 3]; $scope.users = $scope.ids.map(function(id) {     return {         id: id,         comment: "",         location: ""     }; }); $scope.locations = ['india', 'usa', 'jermany', 'china', 'dubai']; $scope.initlocation = (user) => {     $timeout(() => {         user.location = $scope.locations[0];     }); } $scope.adduser = function() {     var data = $scope.users.map(function(user) {         return {             "userid": user.id,             "manualcomment": user.comment,             "location": user.location         }     });      console.log("data", data) }   }); 

as per requirement adding ng-click delete button , adding removeselform method , pass user object function parameter. in controller removing particular form values users object.

var myapp = angular.module('myapp', []);  myapp.controller('myctrl', function($scope, $timeout) {      $scope.ids = [1, 2, 3];      $scope.users = $scope.ids.map(function(id) {          return {              id: id,              comment: "",              location: ""          };      });      $scope.locations = ['india', 'usa', 'jermany', 'china', 'dubai'];      $scope.initlocation = (user) => {          $timeout(() => {              user.location = $scope.locations[0];          });      }      $scope.removeselform = function(item) {          var index = $scope.users.indexof(item)          $scope.users.splice(index, 1);        }      $scope.adduser = function() {          var data = $scope.users.map(function(user) {              return {                  "userid": user.id,                  "manualcomment": user.comment,                  "location": user.location              }          });            console.log("data", data)      }    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>  <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>  <div ng-app="myapp">      <div ng-controller="myctrl">          <form role="form" name='userform' novalidate>              <div class="container">                  <div class="row" ng-repeat="user in users">                      <div class="form-group">                          <div class="col-md-3">                              <label>id</label>                              <input ng-model="user.id" id="user.id" name="user.id" placeholder="enter bugid" type="text" required readonly disabled>                          </div>                            <div class="col-md-3">                              <label>comments</label>                              <textarea ng-model="user.comment" id="textarea1" rows="1" required></textarea>                          </div>                            <div class="col-md-3 ">                              <label>location</label>                                <select ng-model="user.location" ng-options="v v in locations" ng-init='initlocation(user)' name="select2" required>                                </select>                          </div>                          <div>                              <button ng-click="removeselform(user)">delete</button>                          </div>                      </div>                  </div>              </div>                <div class="buttoncontainer text-center btn-container">                  <br>                  <button ng-disabled="userform.$invalid" type="button" id="adduser" ng-click="adduser()">add user</button>                  <button type="button" class="btn button--default btn--small pull-center">close</button>              </div>          </form>        </div>