AngularJs UI typeahead match on leading characters

At the end of the day your question is not really specific to the typeahead directive but it has more to do with how AngularJS filters work.

Before presenting a working solution please note that the typeahead directive makes heavy use of AngularJS infrastructure ($http, promises) and expression language. So it is important to realize that the states | filter:selected is nothing more that an AngularJS expression.

Having a look at the above expression we need to find a way of filtering an array to return a list of matching items. The only special thing about the typeahead directive is that there is a $viewValue variable representing a value entered by a user in the input box. So we basically just need to filter the states array to return items starting with the $viewValue.

There are many ways of doing this but since you've mentioned the comparator for filters (please note that those were only introduced in 1.1.x version of AngularJS) you would have to define a comparator function that should decide if a given item should be returned in the list of results or not. Such a function could look like follows:

$scope.startsWith = function(state, viewValue) {  return state.substr(0, viewValue.length).toLowerCase() == viewValue.toLowerCase();} 

Having it defined the usage is very simple:

typeahead="name for name in states | filter:$viewValue:startsWith"

Here is the working plunk: http://plnkr.co/edit/WWWEwU4oPxvbN84fmAl0?p=preview

Custom filter for get the matching to be done on the leading characters in typehead auto completion box.

(function() {    // Create global filters using angular.filter() only. Never use local filters inside    // controllers/services. This enhances testing and reusability.    function xpTypeaheadFilter() {          return function(items, props) {            var out = [];                        if (angular.isArray(items)) {              items.forEach(function(item) {                                                var text = props.toLowerCase();                var itemLoverCase =item.toLowerCase();                var substr = itemLoverCase.substr(0, text.length);                                 if (substr === text ) {                                         out.push(item);                                     }                              });            } else {              // Let the output be the input untouched              out = items;            }            console.log("out lem", out.length);            return out;          };    }    // Pass functions into module methods rather than assigning a callback.    // This helps aid with readability and helps reduced the amount of code "wrapped"    // inside Angular.    angular.module('common')    .filter('xpTypeaheadFilter', xpTypeaheadFilter);})();

<input type="text" ng-model="vesselName" placeholder="Vessel Name" typeahead="vesselName for vesselName in vesselNames | xpTypeaheadFilter:$viewValue | limitTo:8"  class="form-control form-textbox" >