javascript html angularjs angularjs-directive angular-filters

Why does AngularJS ng-repeat filter for search term not work?

I'm trying to make a table that filters to only show rows that contain whatever string is in the search box. I have a simple example that I'm just trying to get to work based off the w3schools tutorial: https://www.w3schools.com/angular/tryit.asp?filename=try_ng_tables_css

This is my filter <tr ng-repeat="x in names | filter:searchKeyword">

And it looks pretty similar to the example given in the API reference: <tr ng-repeat="friend in friends | filter:searchText"> https://docs.angularjs.org/api/ng/filter/filter

The problem is that nothing happens when I type stuff in the search box. I expect the table to dynamically change as the search term changes. What am I missing?

Here is the code I have:

<html>
<head>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script>
</head>
<body>
    <label>Search: <input type="text" ng-model="searchKeyword"></label>
    <div ng-app="myApp" ng-controller="customersCtrl"> 
        <table>
          <tr ng-repeat="x in names | filter:searchKeyword">
            <td>{{ x.Name }}</td>
            <td>{{ x.Country }}</td>
            <td>{{ x.City }} </td>
          </tr>
        </table>
    </div>

    <script>
    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope) {
        $scope.names = [
        {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
        {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, 
        {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, 
        {"Name":"Around the Horn","City":"London","Country":"UK"}, 
        {"Name":"B's Beverages","City":"London","Country":"UK"}, 
        {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, 
        {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, 
        {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, 
        {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, 
        {"Name":"Bon app'","City":"Marseille","Country":"France"}, 
        {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, 
        {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, 
        {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, 
        {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, 
        {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
        ];
    });
    </script>
</body>
</html>

Solution

You just need to put your input box inside your app :) Also, DOM filters suck (inject $filter into your controller instead). See why: https://toddmotto.com/use-controller-filters-to-prevent-digest-performance-issues/

(Just putting my comment in answer form as requested.)

    var app = angular.module('myApp', []);
    app.controller('customersCtrl', function($scope) {
        $scope.names = [
        {"Name":"Alfreds Futterkiste","City":"Berlin","Country":"Germany"}, 
        {"Name":"Ana Trujillo Emparedados y helados","City":"México D.F.","Country":"Mexico"}, 
        {"Name":"Antonio Moreno Taquería","City":"México D.F.","Country":"Mexico"}, 
        {"Name":"Around the Horn","City":"London","Country":"UK"}, 
        {"Name":"B's Beverages","City":"London","Country":"UK"}, 
        {"Name":"Berglunds snabbköp","City":"Luleå","Country":"Sweden"}, 
        {"Name":"Blauer See Delikatessen","City":"Mannheim","Country":"Germany"}, 
        {"Name":"Blondel père et fils","City":"Strasbourg","Country":"France"}, 
        {"Name":"Bólido Comidas preparadas","City":"Madrid","Country":"Spain"}, 
        {"Name":"Bon app'","City":"Marseille","Country":"France"}, 
        {"Name":"Bottom-Dollar Marketse","City":"Tsawassen","Country":"Canada"}, 
        {"Name":"Cactus Comidas para llevar","City":"Buenos Aires","Country":"Argentina"}, 
        {"Name":"Centro comercial Moctezuma","City":"México D.F.","Country":"Mexico"}, 
        {"Name":"Chop-suey Chinese","City":"Bern","Country":"Switzerland"}, 
        {"Name":"Comércio Mineiro","City":"São Paulo","Country":"Brazil"}
        ];
    });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="myApp" ng-controller="customersCtrl"> 
    <label>Search: <input type="text" ng-model="searchKeyword"></label>
    <table>
      <tr ng-repeat="x in names | filter:searchKeyword">
        <td>{{ x.Name }}</td>
        <td>{{ x.Country }}</td>
        <td>{{ x.City }} </td>
      </tr>
    </table>
</div>