<!DOCTYPE html>
<html lang="en">
 <head>
  <style>
   @import url("https://fonts.googleapis.com/css?family=Noto\+Sans");
body {
  font: 14px/1.4 'Noto Sans', sans-serif;
}
.page-header {
  border-color: #888;
}
.page-header p {
  font-size: 1.2em;
}
.dropdown-menu a,
.input-group-addon {
  cursor: pointer;
}
section.panel {
  border: 2px solid #444;
}
section.panel header {
  background-color: #ccc;
  padding: 0.5em 1em;
}
  </style>
 </head>
 <body translate="no">
  <div class="container">
   <div class="page-header">
    <h1>
     AngularJS live filtering
    </h1>
    <p class="text-success">
     Experimenting with AngularJS filters
    </p>
   </div>
  </div>
  <div class="container-fluid" ng-app="tagFilterApp">
   <div class="col-md-4">
    <section class="panel" ng-controller="TagController">
     <header>
      <div class="btn-group" style="float: left">
       <button class="btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
        {{tagOrder.name}}
        <span class="caret">
        </span>
       </button>
       <ul class="dropdown-menu" role="menu">
        <li ng-repeat="order in orders">
         <a ng-click="setOrder(order)">
          {{order.name}}
         </a>
        </li>
       </ul>
      </div>
      <div class="input-group">
       <input class="form-control" ng-model="query" placeholder="Filter the list of tags" type="text"/>
       <span class="input-group-addon" ng-click="clearFilter()" ng-disabled="query.length == 0">
        <i class="glyphicon glyphicon-remove">
        </i>
       </span>
      </div>
     </header>
     <div class="list-group">
      <a class="list-group-item" href="#" ng-repeat="tag in tags | filter:query | orderBy:tagOrder.order">
       <span class="badge">
        {{tag.count}}
       </span>
       {{tag.name}}
      </a>
     </div>
    </section>
   </div>
  </div>
 </body>
</html>
