Добавяне и премахване на елементи към/от списъка (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();
            });
        }
    };
});

Ето моето ДЕМО