How do I change an AngularJS variable I declared in $scope using annyang speech commands?

Question

I have a simple speech recognition app that starts and pauses a video based on speech commands. My problem is that a variable that I declare in $scope does not change when I give the pause command. The intent is for the number in the textarea to change when I pause the video using the "pause" speech command.

Link to fiddle

var myApp = angular.module('myApp', ['vjs.video']);

myApp.controller("myCtrl", function MyCtrl($scope) {
  $scope.playtime = 0; 

  $scope.$on('vjsVideoReady', function(e, data) {
    $scope.vid = data.player;

    $scope.commands = {
      'play': function() {
        $scope.vid.play();
      },
      'pause': function() {
        $scope.vid.pause();
        $scope.playtime = 10;
      }
    };

    $scope.ay = annyang;
    $scope.ay.addCommands($scope.commands);
    $scope.ay.debug();
    $scope.ay.start();

  });

});

Thank you very much for your help.

Answer 1

just simply put $scope.$digest in your pause callback:

'pause': function() {
    $scope.vid.pause();
    $scope.playtime = 10;
    $scope.$digest();
}

so angular will know something has changed when you are tried to change $scope variable outside angular's working area.

hope that helps