proof of concept to get uib-typeahead using custom filter using directive

<!DOCTYPE html>
<html ng-app="typeAheadExample">

  <head>
    <link data-require="bootstrap-css@3.*" data-semver="3.3.7" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.css" />
    <script data-require="angularjs@1.6.*" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <script data-require="angular-animate@1.6.*" data-semver="1.6.5" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.5/angular-animate.min.js"></script>
    <script data-require="angular-touch@1.6.*" data-semver="1.6.2" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.6.2/angular-touch.js"></script>
    <script data-require="ui-bootstrap@*" data-semver="2.5.0" src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.js"></script>
    <script data-require="underscore.js@1.8.3" data-semver="1.8.3" src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="style.css" />
  </head>

  <body>
    <div class="container-fluid" ng-controller="TypeAheadCtrl">
        <bai-filter-sort-best-match items="states" />
    </div>
  </body>

</html>

var app = angular.module('typeAheadExample', ['ui.bootstrap']);

app.controller('TypeAheadCtrl', function($scope, $filter) {
 // $scope.states = ['Alabama', 'Alaska', 'Arizona', 'Arkansas', 'Colorado', 'Connecticut', 'Delaware', 'Florida', 'Georgia', 'Hawaii', 'Idaho', 'Illinois', 'Indiana', 'Iowa', 'Kansas', 'Kentucky', 'Louisiana', 'Maine', 'Maryland', 'Massachusetts', 'Michigan', 'Minnesota', 'Mississippi', 'Missouri', 'Montana', 'Nebraska', 'Nevada', 'New Hampshire', 'New Jersey', 'New Mexico', 'New York', 'North Dakota', 'North Carolina', 'California', 'Ohio', 'Oklahoma', 'Oregon', 'Pennsylvania', 'Rhode Island', 'South Carolina', 'South Dakota', 'Tennessee', 'Texas', 'Utah', 'Vermont', 'Virginia', 'Washington', 'West Virginia', 'Wisconsin', 'Wyoming'];
  $scope.states = ['000001 Accounting', '000001 Loan Accounting', '000001 Process Loans', '000001 Loan Processor', '000001 Loan Manager'];
  //$scope.states = ['Adverse Action Processor', 'Appraisal Processor', 'Automated Services Processor', 'Jr. Processor', 'Lease Processor', 'Loan Processor', 'Loan Processor Jr.', 'Loan Processor Sr.', 'Processor'];
});

app.directive('baiFilterSortBestMatch', function() {
  return {
    restrict: 'E',
    templateUrl: 'typeaheadExampleTemplate.html',
    scope: {
      items: "="
    },
    controller: function($filter, $scope) {
      console.log($scope);
      $scope.selected = undefined;
      $scope.states = $scope.items;
      $scope.searchForStates = function(viewValue) {
        if (viewValue) {
          var filtered = $filter('filter')($scope.states, viewValue);
          var finalSorted = _.sortBy(filtered, function(s) {
            return s.toLowerCase().indexOf(viewValue.toLowerCase());
          });
        }
        return finalSorted;
      }
    }
  }
});

/* Styles go here */

      <div>Selected:                         <span>{{selected}}</span>
      </div>
<div>
  <input type="text" ng-model="selected" uib-typeahead="name for name in searchForStates($viewValue) | limitTo:25" />
</div>