AngularUI-Bootstrap Typeahead: Agrupando resultados

Estou implementando typeahead usando AngularUI-Bootstrap. Eu preciso mostrar os resultados agrupados com base em alguns valores provenientes do banco de dados. Aqui está um exemplo de cenário

Existem alguns usuários no banco de dados, cada usuário tem um "Departamento". Um nome de usuário pode estar disponível em vários departamentos.O usuário final digita os nomes para pesquisar usuários no banco de dados e recupera a lista na lista de digitação antecipada. Como um nome de usuário pode pertencer a vários departamentos, o requisito é mostrar os nomes de usuário agrupados por departamentos diferentes. Algo assim:Em seguida, o usuário pode selecionar o nome de usuário desejado e continuar.

ConformeTypeahead documentação presenteaqui, Não vejo nenhuma opção para atender às minhas necessidades.

Eu tentei a seguinte solução alternativa: Sempre que a matriz typeahead está se formando, anexei o departamento do usuário ao elemento da matriz:

$scope.fetchUsers = function(val) {
        console.log("Entered fetchUsers function");
        return $http.get("http://localhost:8080/TestWeb/users", {
            params : {
                username : val
            }
        }).then(function(res) {
            console.log("Response:",res);
            var users = [];
            angular.forEach(res.data, function(item) {
                users.push(item.UserName + " - " + item.UserDepartment);
            });
            console.log("users=",users);
            return users;
        });
    };

Dessa forma, pelo menos o usuário final vê o departamento. Mas quando eu seleciono o registro, o valor selecionado é o conteúdo completo do elemento da matriz. Abaixo está um exemplo de captura de tela para elaborar:

HTML

Usuários do serviço local
<pre>Model: {{userList | json}}</pre>
<input type="text" ng-model="userList" placeholder="Users loaded from local database" 
typeahead="username for username in fetchUsers($viewValue)" 
typeahead-loading="loadingUsers" class="form-control">
<i ng-show="loadingUsers" class="glyphicon glyphicon-refresh"></i>

Tipos de usuário na string

Usuário seleciona um registro

Eu quero evitar o departamento (neste caso, string- Desc 4 ) quando o usuário seleciona um registro.

Existe alguma maneira de conseguir esse agrupamento sem nenhuma solução alternativa? Ou existe alguma maneira de melhorar minha solução alternativa?

questionAnswers(2)

yourAnswerToTheQuestion