Добавление и удаление элементов в/из списка (AngularJS)

У меня есть два списка:

1. список с уже существующими городами
2. список, из которого я могу добавить новые города в свой первый список.

Если я набираю имя, все в порядке, он создает новый элемент в первом списке. Что я хочу сделать, так это добавить города в первый список, щелкнув элементы из второго списка (сначала проверьте один город, а затем подтвердите действие, нажав кнопку). A попытался получить имя элемента, на который нажали, через jQuery и ввести его во вход, чтобы иметь возможность на следующем шаге подтвердить добавление.

$(document).on('click', '.city', function () {
    var input = $('.city-input'),
        inputValue = input.val();
    input.val($(this).text());
    return false;
});

И он берет имя и помещает это имя на вход. Но когда я нажимаю кнопку - создается только пустой элемент...

Если я что-то набрал, то нажимаю кнопку - создается элемент. Затем, если я нажму любой город из второго списка - он появится в поле ввода, но после того, как я нажму кнопку подтверждения, он создаст элемент с ранее набранным текстом...

Кроме того, я пытался создать директиву, но это все еще не работает.

addCityApp.directive('searchList', function() {
    return {
        scope: {
            searchModel: '=model'
        },
        link: function(scope, element, attrs) {
            element.on('click', attrs.searchList, function(){
                scope.searchModel = $(this).text();
                scope.$apply();
            });
        }
    };
});

Вот моя ДЕМО