Remove or delete an element completely and also the data inside the array using ng click

Question

Is there a way I can remove or delete an element completely. The code I have created only deletes the element but not the data in where it is stored. Basically the concept is like gmail wherein if you click on the X or the name of recipient, it will automatically be removed from the list

<div class="content referral-sender-page">
  <div class="wrapper">
    <div class="main" ng-controller="ReferralDispatchController">
      <h1 class="h large">Send Invites</h1>
      <!-- TODO: Explanatory text -->
      <div>
      <section class="grid__item bp-md-one-third">
        <h5 class="h medium gray">To</h5>
        <span ng-repeat="e in emails" class="h small email-list">
          <span remove-on-click ng-click="removeEmail()" class="email-item">{{ e }} <small class="close">X</small></span>
        </span>
        <div class="col-2">
          <input class="input" type="email"
                 ng-model="email"
                 placeholder="Email">
          <a ng-click="addEmail()" class="button pads primary" >+</a>
        </div>
      </section>
      <section class="grid__item bp-md-two-thirds">
        <h5 class="h medium gray">Message</h5>
        <p>Write a message to send to your homies with your invite</p>
        <textarea class="text-input" ng-model="message" rows="5">
          This is awesome and you should try it!
        </textarea>
      </section>
      </div>
      <div class="space--bottom one-whole">
        <a ng-click="sendReferral()" class="button pads primary">Send Email Invite</a>
      </div>
    </div>
  </div>
</div>

---

var ctrls = angular.module('elstudio.controllers.site');

//Removes Element only
ctrls.directive('removeOnClick', function() {
    return {
        link: function(scope, elt, attrs) {
            scope.removeEmail = function() {
                elt.remove();
            };
        }
    }
});


ctrls.controller('ReferralDispatchController', function ($scope, UserService,
                                                         ReferralService) {
    $scope.emails = [];
    $scope.message = '';



    $scope.addEmail = function() {

        if (!$scope.email) {
            $scope.$emit('notify', { message: 'Please provide a valid email address' });
            return;
        }
        // If email already in list, ignore
        // FIXME: Provide feedback
        if ($scope.emails.indexOf($scope.email) != -1) {
            $scope.email = '';
            return;
        }

        $scope.emails.push($scope.email);
        $scope.email = '';
    };

    $scope.sendReferral = function() {
        if (!$scope.loginUser) {
            $scope.$emit('notify', { message: 'Please sign up or log in to your Electric account.',
                                     duration: 3000 });
            angular.element('html, body').animate({ scrollTop: 0 }, 'slow');
            angular.element('.login-toggle').click();
            return;
        }

        if ($scope.email != '') {
            $scope.emails.push($scope.email);
        }

        if (!$scope.emails) {
            $scope.$emit('notify', { message: 'Please provide at least one email address' });
            return;
        }

        var refer = {
            emails: $scope.emails,
            message: $scope.message
        };

        var sendSuccess = function() {
            $scope.$emit('notify', { message: 'An invitation has been sent!',
                                     duration: 4000 });
        };
        var sendFailed = function(error) {
            // Retry?
            $scope.$emit('notify', { message: "Couldn't send invitation",
                                     duration: 4000 });
        };

        ReferralService.email(refer).$promise.then(sendSuccess, sendFailed);
    };
});

Answer 1

In Angular you always (mostly) control the data itself instead of the display component.

<span remove-on-click ng-click="removeEmail(e)" class="email-item">{{ e }} <small class="close">X</small></span>

scope.removeEmail = function(e) {
    var index = scope.$parent.emails.indexOf(e);
    scope.$parent.emails.splice(index, 1);
};

---

For the directive to be reusable on other types of lists, you can consider passing the reference of the parent list to the directive, or passing the function to delete to the directive (better).