title: AngularJs How to detect change in scope variable object
body: <p>I'm using <a href="https://www.codacy.com/app/jonniespratley/angular-webspeech-directive" rel="nofollow">angular-webspeech-directive</a></p>
  
  <p>Here's the HTML code:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html ng-app="plunker"&gt;
  
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;TestBed&lt;/title&gt;
      &lt;link data-require="bootstrap-css@3.0.0" data-semver="3.0.0" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" /&gt;
      &lt;link data-require="font-awesome@4.3.0" data-semver="4.3.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css" /&gt;
      &lt;link href="//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css" rel="stylesheet" /&gt;
      &lt;link rel="stylesheet" href="css/style.css" /&gt;
  
  &lt;/head&gt;
  
  &lt;body ng-controller="MainCtrl" ng-cloak=""&gt;
  
  &lt;div class="container"&gt;
  
      &lt;div class="row"&gt;
          &lt;div class="col-md-12"&gt;
  
              asdfasdf
              &lt;js-speech ng-model="speech"&gt;&lt;/js-speech&gt;
  
              &lt;!--
              &lt;pre&gt;js-speech ng-model="speech"&lt;/pre&gt;
              &lt;br /&gt;--&gt;
  
              &lt;strong&gt;Debugger&lt;/strong&gt;
              &lt;pre&gt;$scope.speech:{{speech|json}}&lt;/pre&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  &lt;/div&gt;
  
  &lt;!-- Application Scripts --&gt;
  &lt;script data-require="jquery@2.0.3" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"&gt;&lt;/script&gt;
  &lt;script data-require="angular.js@1.0.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.8/angular.min.js" data-semver="1.0.8"&gt;&lt;/script&gt;
  &lt;script data-require="modernizr@2.6.2" data-semver="2.6.2" src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.6.2/modernizr.js"&gt;&lt;/script&gt;
  
  
  
  &lt;script src="js/Speech.js"&gt;&lt;/script&gt;
  &lt;script src="js/speechapp.js"&gt;&lt;/script&gt;
  
  &lt;/body&gt;
  
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's angular speechapp.js</p>
  
  <pre><code>(function() {
      var app;
  
      app = angular.module("plunker", ["jonniespratley.angularWebSpeechDirective"]);
  
      app.controller("MainCtrl", function($scope) {
  
  
          return $scope.speech = {
              maxResults: 25,
              continuous: true,
              interimResults: true
          };
  
          $scope.$on('onresult', function() {console.log( "----&gt;speech.interimResults&lt;----" );});
  
          $scope.test=function(){
              console.log( "----&gt;speech.interimResults&lt;----" );
          }
          $scope.$digest();
          $scope.$watch('$scope.speech.interimResults', function() {console.log( "----&gt;speech.interimResults&lt;----" ); }, true);
  
          $scope.$watch('speech.interimResults', function(newVal, oldVal) {
            //do something here like get the text input value and send to api
            //after speaking even the value of speech.intermResults change this does not get triggered.  
            return console.log(newVal);
          }, true);
      });
  
  }).call(this);
  </code></pre>
  
  <p>what I wanted to happen is whenever the user completed speaking into the Mic, i can get the input txt so I can post process the text content. I need to get the content of the text input and be able to send it to an API, however I can't find a hook to the directive's onresult event.</p>
  
  <p>Is it a good way to watch the scope.speech, I tried $scope.$watch to see if $scope.speech is changed but its not working.  Thanks in advance for any help.</p>