Tengo problemas para actualizar mi alcance en el front-end mientras hago una solicitud a una API. En el backend puedo ver que el valor de mi variable $ scope está cambiando pero esto no se refleja en las vistas.

Aquí está mi controlador.

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);
      });
    });  
 }
});

Aquí hay un fragmento de mi 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>

He probado varias soluciones, incluido el uso$ scope. $ apply (); pero esto solo crea el error común

Error: $ digest ya está en progreso

La siguiente publicación sugiere usar$ tiempo de espera o $ asyncDefaultAngularJS: Evite el error $ digest ya en progreso al llamar a $ scope. $ Apply ()

El código que tengo arriba usa $ timeout y no tengo errores, pero aún así la vista no se actualiza.

Ayuda apreciada