<!doctype html>
<html ng-app="filterSample">
  <head>
    <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
    <script src="example.js"></script>
  </head>
  <body>
    <span>This is used in an answer to a <a href="http://stackoverflow.com/questions/19501300/angular-js-startswith-custom-filter">stackoverflow question</a> regarding filters.</span>
    <div ng-controller="filterCtrl">
      <input type="text" ng-model="search" />
        <ul border="1px" ng-repeat="msg in data.messages | filter:search:startsWith">
          <li>{{msg}}</li>
        </ul>
    </div>
  </body>
</html>
var app = angular.module('filterSample', []);
app.controller('filterCtrl', function ($scope) {
  
  $scope.data = {
    messages: ['first', 'second', '3rd', 'fourth', 'fifth']
  }
  
  $scope.startsWith = function (actual, expected) {
    var lowerStr = (actual + "").toLowerCase();
    return lowerStr.indexOf(expected.toLowerCase()) === 0;
  }
});