Ich habe Probleme beim Aktualisieren meines Bereichs im Front-End, während ich eine Anforderung an eine API stelle. Im Backend kann ich sehen, dass sich der Wert meiner $ scope-Variablen ändert, dies wird jedoch nicht in den Ansichten widergespiegelt.

Hier ist mein Controller.

Controllers.controller('searchCtrl', 
 function($scope, $http, $timeout) {
   $scope.$watch('search', function() {
      fetch();
   });

 $scope.search = "Sherlock Holmes";

 function fetch(){
   var query = "http://api.com/v2/search?q=" + $scope.search + "&key=[API KEY]&format=json";
    $timeout(function(){
      $http.get(query)
      .then(function(response){ 
        $scope.beers = response.data; 
        console.log($scope.beers);
      });
    });  
 }
});

Hier ist ein Ausschnitt aus meinem HTML

<div ng-if="!beers">
  Loading results...
</div>
<p>Beers: {{beers}}</p>
<div ng-if="beers.status==='success'">

  <div class='row'>
    <div class='col-xs-8 .col-lg-8' ng-repeat="beer in beers.data track by $index" ng-if="beer.style">
    <h2>{{beer.name}}</h2>          
    <p>{{beer.style.description}}</p>
    <hr>
    </div>
  </div>
</div>

<div ng-if="beers.status==='failure'">
  <p>No results found.</p>
</div>

Ich habe verschiedene Lösungen ausprobiert, einschließlich der Verwendung von $ scope. $ apply (); aber das erzeugt nur den allgemeinen Fehler

Error: $ digest bereits in Bearbeitung

Der folgende Beitrag schlug vor, @ zu verwend $ timeout oder $ asyncDefaultAngularJS: Verhindert, dass der $ digest-Fehler bereits ausgeführt wird, wenn $ scope aufgerufen wird. $ Apply ()

Der Code, den ich oben habe, verwendet $ timeout und ich habe keine Fehler, aber die Ansicht wird immer noch nicht aktualisiert.

Hilfe geschätzt