<!DOCTYPE HTML>
<html xmlns:ng="http://angularjs.org">
<head>
  <script type="text/javascript" src="../src/angular-bootstrap.js" ng:autobind></script>
</head>
<body ng:init="$window.$root = this; data = [{foo: 'foo'},{bar: 'bar'}]">
  <p>This is a demo of a potential bug in angular.</p>
  <p>Try the following:</p>
  <ol>
    <li> Type "foo" on the filter box.
    <li> Clear the contents of the filter box.
    <li> Type "bar" on the filter box.
    <li> Clear the contents of the filter box.
  </ol>
  <p>Why doesn't the data goes back to the original?</p>
  <hr>
  Input: <input type="text" ng:model="filterName" id="filterInputField"/>
  <br/>
  <table ng:eval="filtered_data = data.$filter(filterName)" style="border: 1px solid black">
  <tr>
    <th>Foo</th>
    <th>Bar</th>
  </tr>
  <tr ng:repeat="record in filtered_data">
    <td>{{record.foo}}</td>
    <td>{{record.bar}}</td>
  </tr>
  </table>
</body>
</html>