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

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

1. список с alredy существуют города
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();
            });
        }
    };
});

Вот мой ДЕМО