Angular JS - Dynamic Search in Array - Similar to Autocomplete feature

Adding Search in Array as Autocomplete feature

HTML

<br/>
<br/>
<div ng-cloak ng-app="TabsApp">
    <div class="container" ng-controller="TabManagerCtrl"> <b>Search:</b>
{{searchText}}
        <ul class="sel">
            <li class="con" ng-repeat="selItem in itemsSelectedArr">{{selItem}} <a href="javascript:void(0);" ng-click="itemSelectedDelet(selItem);">X</a>

            </li>
            <li>
                <input type="text" ng-model="searchText" ngsearchtext="searchMe(searchText);" />
            </li>
        </ul>
        <br class="clearall" />
        <br/>
        <div class="autocompletepanel" ng-show="itemsDisplaPanel">
            <div ng-repeat="item in itemsArr"> <a href="javascript:void(0);" ng-click="itemSelectedData(item);">{{item}}</a>

            </div>
        </div>
        <!-- autocomplete-->
    </div>
    <!-- /container -->
</div>
<!-- /app -->

CSS

.container {
    border: 1px solid #000;
    border-radius:5px;
    margin:5px;
    padding:2px;
    width:90%;
}
.autocompletepanel {
    border: 1px solid #eee;
    border-radius:3px;
    padding:4px;
    width:95%;
    margin: 5px;
}
.sel {
    width: 90%;
}
.sel li {
    list-style-type:none;
    float: left;
}
.sel .con {
    border: 1px solid #ccc;
    border-radius:3px;
    padding:2px;
    width: 40%;
}
.clearall {
    clear: both;
}

JavaScript

/*app.js*/

var angularApp = angular.module('TabsApp', []);
angularApp.controller('TabManagerCtrl', ['$scope', function ($scope) {

    var n = ["Action Comics", "Action Comics 2", "Actan Commm 3", "Detective Comics", "Superman", "Fantastic Four", "Amazing Spider-Man", "Batman Series", "Repoman Seeks", "Love Comics", "Anime Comics"];

    var containsText = function (search) {
        var gotText = false;
        for (var i in n) {
            var re = new RegExp(search, "ig");
            var s = re.test(n[i]);
            if (s) {
                $scope.itemsArr.push(n[i]);
                gotText = true;
            }
        }
        return gotText;
    };
    $scope.searchText = "";
    $scope.itemsSelectedArr = [];
    $scope.itemsArr = [];
    $scope.itemsDisplaPanel = false;
    $scope.searchMe = function (search) {
        $scope.itemsArr = [];
        $scope.itemsDisplaPanel = false;
        if (search.length > 2) {
            var foundText = containsText(search);
            $scope.itemsDisplaPanel = (foundText) ? true : false;
        }
    };

    $scope.itemSelectedData = function (str) {
        $scope.itemsDisplaPanel = false;
        $scope.searchText = "";
        return (str) ? $scope.itemsSelectedArr.push(str) : false;
    };

    $scope.itemSelectedDelet = function (sel) {
        var idx = $scope.itemsSelectedArr.indexOf(sel);
        if (idx !== -1) $scope.itemsSelectedArr.splice(idx, 1);
        $scope.itemsDisplaPanel = false;
    };

}]);

angularApp.directive('ngsearchtext', function () {
    return function (scope, element, attrs) {
        element.bind("keyup", function (event) {
            if (event.which !== 13) {
                scope.$apply(function () {
                    scope.$eval(attrs.ngsearchtext);
                });

                event.preventDefault();
            }
        });
    };
});