angular delete element with modal and ng-repeat

Question

I have an array of objects displayed in view by ng-repeat comand. After clicking a "delete" button number.toDelete value should be changed to index of the clicked element of array and pass to the modal. However number.toDelete value in every case is undefined.

This modal window is separated from ng-repeat. I also use a standard version of bootstrap.

<div ng-if="myArray.length != 0" ng-repeat="element in myArray track by $index">
        <div class="well">
            <p><span class="policyRepeat">{{element.name}}</span> &nbsp({{element.amount}}</p>
            <button  class="Delete btn btn-sm btn-danger" data-toggle="modal" data-target="#deleteElement" ng-click="number.toDelete = $index">delete</button>
        </div></div>

        <!-- DELETE MODAL -->
        <div class="modal fade" id="deleteElement" role="dialog">
                <div class="modal-dialog">
                  <!-- Modal content-->
                  <div class="modal-content">
                    <div class="modal-header">
                      <button type="button" class="close" data-dismiss="modal">&times;</button>
                      <h4 class="modal-title text-center">Are your sure you want to delete this element?</h4>
                    </div>
                    <div class="modal-body">
                      <div class="containter">
                        Modal Body
                      </div>
                    </div>
                    <div class="modal-footer">
                      <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
                      <button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="deleteElement(number.toDelete)">Delete</button>
                    </div>
                  </div>
                 </div>
              </div>

Answer 1

Change your delete btn to this

<button type="button" class="btn btn-danger" data-dismiss="modal" ng-click="deleteElement(element)">Delete</button>

in your angular controller, add this delete method

$scope.deleteElement = function(element) {
   $scope.myArray.splice($scope.myArray.indexOf(element), 1);
};