AngularJS Example:

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<div ng-app>
    <div ng-controller="TodoCtrl">
        <div ng-app="" ng-init="names=['One','Two','Three']">
            <ul>
                <li ng-repeat="x in names"> <span class="tag label label-info">
  <span>{{x}}</span>
 <a data-toggle="modal" data-target="#confirm-delete"><i class="remove glyphicon glyphicon-remove-sign glyphicon-white"></i></a> 
                    </span>
                </li>
            </ul>
        </div>
        
        <div class="modal fade" id="confirm-delete" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                 <h4 class="modal-title" id="myModalLabel">Confirm Delete</h4>

            </div>
            <div class="modal-body">
                <p>You are about to delete one track, this procedure is irreversible.</p>
                <p>Do you want to proceed?</p>
                <p class="debug-url"></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button> 
                <a ng-click="deleteMe()" class="btn btn-danger btn-ok" data-dismiss="modal">Delete</a>

            </div>
        </div>
    </div>
</div>
        
        
    </div>
</div>

CSS

/* adapted from http://maxwells.github.io/bootstrap-tags.html */
 .tag {
    font-size: 14px;
    padding: .3em .4em .4em;
    margin: 0 .1em;
}
.tag a {
    color: #bbb;
    cursor: pointer;
    opacity: 0.6;
}
.tag a:hover {
    opacity: 1.0
}
.tag .remove {
    vertical-align: bottom;
    top: 0;
}
.tag a {
    margin: 0 0 0 .3em;
}
.tag a .glyphicon-white {
    color: #fff;
    margin-bottom: 2px;
}

JavaScript

function TodoCtrl($scope) {
    $scope.todos = [{
        text: 'learn angular',
        done: true
    }, {
        text: 'build an angular app',
        done: false
    }];

    $scope.addTodo = function () {
        $scope.todos.push({
            text: $scope.todoText,
            done: false
        });
        $scope.todoText = '';
    };
    
    $scope.deleteMe = function(){
        alert('Deleted');
    }


    $(".tag").off("click").on("click", function (e) {

        alert("Span clicked");
    });

    $scope.remaining = function () {
        var count = 0;
        angular.forEach($scope.todos, function (todo) {
            count += todo.done ? 0 : 1;
        });
        return count;
    };

    $scope.archive = function () {
        var oldTodos = $scope.todos;
        $scope.todos = [];
        angular.forEach(oldTodos, function (todo) {
            if (!todo.done) $scope.todos.push(todo);
        });
    };
}