Создание директивы Angularjs

У меня есть набор из двух функций, которые я использую для поиска для идентификации пользователя. В моем приложении мне нужно сделать это для нескольких ролей (например, запросчик, процессор и т. д.). Я думаю, что хочу создать директиву, чтобы я мог повторно использовать код без необходимости копировать и изменять его для каждой роли — если я понимаю концепцию директивы.

Я сделал попытку, но вместо поля ввода, которое фактически отображается для ввода имени, я вижу имя html-файла шаблона. Я, очевидно, делаю что-то не так, но, поскольку я очень новичок в директивах (настраиваемых и их создании), я уверен, что сделал это неправильно.

Что мне нужно, так это возможность вводить имя человека, и когда я набираю, оно должно вызывать функцию, которая выполняет фактический поиск. Пока выполняется поиск совпадения, я хочу, чтобы отображалась скользящая полоса, указывающая на то, что что-то происходит. После того, как я выберу соответствующего пользователя, я хочу, чтобы имя и идентификатор были сохранены в моей модели, и панель закроется.

Это то, что я вставил в свой HTML, чтобы вызвать мою директиву:

<name-user idModel="request.requesterID" nameModel="request.requester"></name-user>

requesterId и requester - это то место, где я хочу получить результаты....

Моя директива:

app.directive('nameUser', function() {
return {
    restrict: 'E',
    require: {
        idModel : '=',
        nameModel : '='
    },
    template : 'app/views/nameUser.html',
    link : function($scope){
        $scope.searchName = function(searchQuery, bar){
            var bar = "#loadingBar" + bar;
            if(searchQuery && searchQuery.length >= 3){
                $(bar).slideDown();
                    $http.get("/read/userinfo/" + searchQuery ).success(function(data){
                    $scope.nameSearchResults = data;
                    $(bar).slideUp();
                });
            }
        }

        $scope.selectName = function(pl){
            nameModel.$setViewValue(pl.name);
            idModel.$setViewValue(pl.user_id);
            $scope.nameSearchResults = {};
        }

    }
};

});

В моем шаблоне есть:

<input type="text" class="form-control input-md" ng-model="nameModel" ng-model-options='{ debounce: 800 }' ng-change="searchName(nameModel,'88')" value="nameModel"/> 
<div class="row" style="padding:20px;display:none;" id="loadingBar88">
    <div class="col-md-6 col-md-offset-5">
        <img alt="Brand" src="files/img/loader.gif">
    </div>
</div>
<table class="table table-bordered table-hover" ng-show="nameSearchResults.length">
<tr>
    <th>User ID</th>
    <th>User Name</th>
</tr>
<tr ng-repeat="entry in nameSearchResults" ng-click="selectName(entry)">
    <td>{{entry.user_id}}</td>
    <td>{{entry.name}}</td>
</tr>

Currently, each time I need a different user id/name for a role, I have to copy the functions and change the names and the bar number...I really think there has to be a way to make this so I can call it multiple times and just pass in the model values I want. While the code above does not give me any errors, it does not provide me the input field and functionality to perform the lookup....please help.