0

I'm making an async call to a speech recognition API and try to store the result in a $scope variable, but the view doesn't change, even though the results show up in console.log just fine. I tried using $scope.$apply() and $scope.applyAsync(); as suggested in these threads - this and this, unfortunately with no effect

Here's what controller looks like:

myApp.controller('audiotest', function($scope)
                    {
    $scope.recognize = function(){
        speech.main('test.wav', function(err, res){
        $scope.myResult = res.results[0].alternatives[0].transcript;
        console.log($scope.myResult); // <- this logs correctly
        $scope.$applyAsync(); // also tried with $scope.$apply();
        });
    };
 };

I don't think the markup is relevant, but here it is, anyway:

<div class="row" ng-controller="audiotest">
<div class="row">

   <button type="button" ng-click="recognize()"> Attempt recognition </button>

<p> Result is {{myResult}} </p>

</div>
</div>

Thanks in advance for any input or ideas.

Community
  • 1
  • 1
angularchobo
  • 183
  • 1
  • 3
  • 17
  • Have you tried `$timeout(function(){ $scope.myResult = res.results[0].alternatives[0].transcript; }, 0)`? – Satpal Oct 10 '16 at 11:40
  • How about moving scope operation to the apply function like so: `$scope.$applyAsync(function () { $scope.myResult = res.results[0].alternatives[0].transcript; });` – lenilsondc Oct 10 '16 at 11:40
  • @Lenilson de Castro, I tried that with both the $apply and $applyAsync function, but it still does nothing. – angularchobo Oct 10 '16 at 11:43
  • Could you provide a fiddle reproducing this behaviour? – lenilsondc Oct 10 '16 at 11:51

1 Answers1

0

Not sure, but try to initialize your myResult on scope before declaring recognize function.

Konstantin Ershov
  • 730
  • 4
  • 13