Тестовое задание №2

HTML

<div ng-app="app" ng-controller="Ctrl">
    <div>
        <!-- тут мы имеем возможность добавлять или удалять значения нашего списка --> 
        <ul>
            <li ng-repeat="item in items">
                id: {{item.id}}, name: {{item.name}} <a href="javascript:void(0)" ng-click="del($index)">Удалить</a>
            </li>
            <li>
                <input type="text" ng-model="itemName" /> <a href="javascript:void(0)" ng-click="add()">Добавить</a>
            </li>
        </ul>
    </div>
    <hr />
    <!-- следующий участок отвечает за отображение директивы и того, что в ней выбрано -->
    <div>
        <select-box></select-box>
        Время выбирать: 
        <select ng-options="item.name for item in items" ng-model="selectedItem">
            <option value="">-- выберите что-нибудь --</option>
        </select>
    </div>
    <hr />
    <!-- Рассказываем пользователю о том, что же он выбрал -->
    <div>
        <span ng-hide="selectedItem">Вы ничего не выбрали</span>
        <span ng-show="selectedItem">Вы выбрали пункт &quot;{{selectedItem.name}}&quot; с id = {{selectedItem.id}}</span>
    </div>
</div>

CSS

ul li {
    list-style-type: none;
}

JavaScript

angular.module('app', [])
.controller("Ctrl", ['$scope', function Ctrl($scope) {
    /*--------------------------------------------------------------------*/
    $scope.sorts = [
        'А', 'Б', 'В', 'Г', 'Д', 'Е', 'Ж', 'З', 'И', 'К', 'Л', 'М', 'Н', 'О', 
        'П', 'Р', 'С', 'Т', 'У', 'Ф', 'Х', 'Ц', 'Ч', 'Ш', 'Щ', 'Э', 'Ю', 'Я',
    ];
    
    $scope.showList = function() {
        $scope.show = !$scope.show;
    }
    
    $scope.filter = function(filter, items) {
        
    }
    
    $scope.chooseItem = function(item) {
        $scope.selectedItem = item;
        $scope.showList();
    }
    /*--------------------------------------------------------------------*/
        
    // Импровизированная база данных
    $scope.items = []

    // Значение поля ввода
    $scope.itemName = '';

    // генератор id :)
    var idSeq = (function() {
        var id = 1;
        return function() {
            return id++;
        }
    })();

    // Функционал удаления/добавления
    $scope.add = function add() {
        // Запретим добавление пустых элементов
        if (!$scope.itemName) return;

        $scope.items.push({
            id: idSeq(),
            name: $scope.itemName
        })
    }

    $scope.del = function del($index) {
        $scope.items.splice($index, 1);
    }
}])
.directive('selectBox', function() {
    return {
        restruct: 'E',
        replace: true,
        template: '<div class="select-main">' + 
            '<div class="select-main-input">' + 
                '<span class="select-main-input-text" ng-click="showList()">{{selectedItem.name}}</span>' + 
            '</div>' + 
            '<div class="select-main-data" ng-show="show">' + 
                '<ul class="select-main-data-sort">' + 
                    '<li class="select-main-data-sort-i">' + 
                        '<a href="" class="select-main-data-sort-i-a">ВСЕ</a>' + 
                    '</li>' + 
                    '<li class="select-main-data-sort-i"...