AngularJS 1.5.x

angular
 .module('app', []);

<!DOCTYPE html>
<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.5.x" src="https://code.angularjs.org/1.5.7/angular.js" data-semver="1.5.7"></script>
    <script src="app.js"></script>
    <script src="app.component.js"></script>
  </head>
  <body>
    <app></app>
  </body>
</html>

/* Put your css in here */

const app = {
  template: `
    <div>
      Filter Groceries: <input ng-model="$ctrl.searchText">
      <ul>
        <li ng-repeat="grocery in $ctrl.groceries | orderBy: 'label' | filter: $ctrl.searchText">
          {{ grocery.label | uppercase }}
        </li>
      </ul>
    </div>
  `,
  controller() {
    this.groceries = [{
      id: 0, label: 'Butter'
    },{
      id: 1, label: 'Apples'
    },{
      id: 2, label: 'Paprika'
    },{
      id: 3, label: 'Potatoes'
    },{
      id: 4, label: 'Oatmeal'
    },{
      id: 5, label: 'Spaghetti'
    },{
      id: 6, label: 'Pears'
    },{
      id: 7, label: 'Bacon'
    }];
  }
};

angular
  .module('app')
  .component('app', app);