Angular 1.6 ng-repeat not displaying results of a search

Question

I'm stumped as to why ng-repeat isn't displaying the results of a search. What works:

• Making an HTTP GET request to get all the data from the database, and ng-repeat displays the results.

• Making an HTTP GET request using a searchterm to get part of the data from the database, and ng-repeat displays the results, with $scope.searchterm = "acme"; setting the searchterm in the controller.

• My search box in the template sends the searchterm to the controller, where I can see it in the console.log, then the HTTP GET request goes out and the correct data returns, which I can also see in the console.log.

What doesn't work is displaying the search result data in the template using ng-repeat.

Here's my HTML template:

<div ng-controller="HomeController">
  <form>
    <label>Search: <input type="text" ng-model="searchterm" /></label><br />
    <input type="submit" ng-click="search(searchterm)" value="Search" />
  </form>
</div>

<div ng-repeat="network_operator in network_operators">
  <span>{{network_operator.name}}</span><br />
</div>

Here's my controller:

app.controller('HomeController', ['$scope', '$http', function($scope, $http){
  console.log("Home controller.");

  // This code displays all of the data, using ng-repeat in the template
  // $http.get('http://qualifynow.herokuapp.com/products?searchstring=').then(function(response) {
  //     $scope.network_operators = response.data.products;
  //     console.log($scope.network_operators);
  // }, function(response) {
  //   console.log("Error, no data returned.");
  // });

  // This works instead in place of the next line, the search results display with ng-repeat
  // $scope.searchterm = "acme";

  $scope.search = function(searchterm) { // This is the line that kills the ng-repeat
    console.log($scope.searchterm); // This works, the search term is passed to the controller
    $http.get('http://qualifynow.herokuapp.com/products?searchstring=supplier:' + $scope.searchterm).then(function(response) {
        $scope.network_operators = response.data.products;
        console.log($scope.network_operators); // The correct search results are logged
        console.log($scope.network_operators[0].name); // The correct name is logged
    }, function(response) {
      console.log("Error, no data returned.");
    });
  };

}]);

I tried running $scope.apply() but this resulted in an error message that $digest was already running.

Is a new $scope being created by the $scope.search function? I.e., is my data happily residing a new $scope when ng-repeat is trying to find data in the old $scope?

I tried ng-submit instead of ng-click, the results are the same.

I tried making a filter instead, that works perfectly, but with a large database it doesn't make sense to put all the data on the $scope and then filter to get the search results. It'll be faster to get only the data the user wants.

Answer 1

In your HTML the part where your search is displayed is not inside the scope of your controller.

So you should do something like this:

<div ng-controller="HomeController">
   <form>
     <label>Search: <input type="text" ng-model="searchterm" /></label><br   />
     <input type="submit" ng-click="search(searchterm)" value="Search" />
   </form>
    <div ng-repeat="network_operator in network_operators">
       <span>{{network_operator.name}}</span><br />
    </div>
</div>

This gets the search in the scope of the controller.

Answer 2

Your controller is limited. Bring your result block(ng-repeat block )inside the controller.