JQuery破坏了我的功能吗

我正在制作一个应用程序，用户可以选择一个物品，也可以使用相机获取qr代码，该代码转换为物品的ID。

问题是，我认为一些JQuery正在扰乱我的范围，使其无法正常工作。

我必须通过监听innerHtml的变化来获取二维码，一旦它发生变化（DOMSubtreeModified），就会发生以下情况。

  var index = 0;
  $('#result').one('DOMSubtreeModified', function(e) {
    var code = "";
    if (e.target.innerHTML.length > 0) {
      code = e.target.innerHTML;
      $scope.ToRun(code);
    }
  });
  $scope.ToRun = function(code) {
    for (i = 0; i < $scope.plantList.length; i++) {
      if ($scope.plantList[i].plantcode == code) {
        index = i;
        break;
      }
    }
    $scope.currentPlant = $scope.plantList[index];
    $scope.plantDetails = false;
    $scope.searchDetails = true;
  }

由于某些原因，以下内容对我的ng类没有任何影响。当一个项目被选中时，我隐藏输入对话框，并显示结果对话框。

$scope.plantDetails = false;
$scope.searchDetails = true;

但是，当用户手动选择项目时，它的工作非常完美。（这些项目点击了一下）

  $scope.viewPlant = function(plant) {
    $scope.currentPlant = plant
    $scope.plantDetails = false;
    $scope.searchDetails = true;
  };

上面的操作很好，只需点击一下。那么，为什么我的监听innerHtml更改的新函数不能工作呢？

HTML片段

<div ng-class="{ 'hidden': searchDetails }">
   <!-- CHOOSE INPUT TYPE -->
   <div class="form-group" style="margin-bottom:0px">
      <div class="btn-group btn-group-justified">
         <div class="btn-group">
            <button type="button" class="btn btn-default" ng-click="digits = false; qr = true">Plant Code</button>
         </div>
         <div class="btn-group">
            <button type="button" class="btn btn-default" ng-click="digits = true; qr = false">QR Code</button>
         </div>
      </div>
   </div>
   <br />
   <!-- QR CODE INPUT -->
   <div ng-class="{ 'hidden': qr }">
      <img id="blah" src="./images/placeholder.png" />
      <span class="btn btn-default btn-file">
      <i class="glyphicon glyphicon-camera"></i>&nbsp;
      <input type="file" onchange="readURL(this);handleFiles(this.files)">
      </span>
      <div id="result">xxxxxx</div>
      <canvas id="qr-canvas" width="800" height="600"></canvas>
   </div>
   <!-- MANUAL SELECTION INPUT -->
   <div ng-class="{ 'hidden': digits }">
      <input ng-model="search.$" style="width:100%; font-size:30px; text-align:center" placeholder="Plant Code" />
      <div style="overflow: auto; max-height:250px">
         <table class="table table-striped" style="background-color:lightblue">
            <tr ng-repeat="plant in plantList | filter:search" ng-click="viewPlant(plant)" style="cursor:pointer">
               <th>{{plant.name}}</th>
               <th>{{plant.plantcode}}</th>
            </tr>
         </table>
      </div>
   </div>
   <div>
   </div>
</div>
<div ng-class="{ 'hidden': plantDetails }">
   // results - this should appear when one of the above is entered.
   //           works for manual selection, but not qr code
</div>

只是困惑于为什么我的QR输入不会触发更改类选项来隐藏searchDetailsdiv并显示plantDetailsdiv

EDIT:做一个小测试，我的类变量似乎根本没有更新。我只是把值放在我的页面底部，当点击块时，它们不会更新

$scope.plantDetails = false;
$scope.searchDetails = true;