使用jquery点击函数完成执行后，角度模型更新和值丢失了吗？

Question

在此示例中，当我们单击单击链接时：-

      $scope.div_1 = true;
      $scope.div_2 = true;
      $scope.div_3 = true;

我像这样动态地更新这个值：

for (var i = 1; i <= 3; i++) {
      if(i == parseInt(divNumber) && $scope['div_'+i] != true){
        $scope['div_'+i.toString()] = true;
      }
      else{
        $scope['div_'+i.toString()] = false;
      }
  }

虽然我调试的时间模型的值在范围内正确更改(如果扩展第二个$scope.div_1 & $scope.div_3变成假，$scope.div_2变成真)，但是它没有更新UI和模型丢失了，而且值改变了以前的值，任何人都可以在这方面提供帮助…

​

var app = angular.module('editor', []);

app.controller('MainCtrl', function($scope) {
 
  $scope.div_1 = true;
  $scope.div_2 = true;
  $scope.div_3 = true;
 
  $("a.expansion-btn").click(function (){
  classes = this.className;
  var divNumber = classes.slice(-1);
  var toGetId = "#div-"+divNumber;
  
  for (var i = 1; i <= 3; i++) {
      if(i == parseInt(divNumber) && $scope['div_'+i] != true){
        $scope['div_'+i.toString()] = true;
      }
      else{
        $scope['div_'+i.toString()] = false;
      }
  }
  if ($(toGetId).hasClass("expanded-div")){
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
  }
  else{
   $(".normal-div").removeClass("compressed-div");
   $(".normal-div").removeClass("expanded-div");
   $(".normal-div").addClass("compressed-div");
   $(toGetId).removeClass("compressed-div");
   $(toGetId).addClass("expanded-div");    
  }  
});
 
 
  
  
});

*{
  box-sizing:border-box;
}
.contenth1{
  height:10%;
}
.contenth2{
  height:80%;
}
.container{
  margin:0;
  padding:0;
  width:100%;
  height:400px;
}
.normal-div{
  width:33.33%;
  height:100%;
  position:relative;
  border:2px solid black;
  float:left;
}
.expanded-div{
    width:80%;
}
.compressed-div{
  width:10%;
}
#div-1{
   
}
#div-2{
   
}
#div-3{
   
}
a.expansion-btn{
  position:absolute;
  top:10px;
  right:10px;
  font-weight:bold;
  cursor:pointer;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div class="container" ng-app="editor" ng-controller="MainCtrl">
            <div class="normal-div" id="div-1">
              <div class="contenth1">
                 <a class="expansion-btn exp-1">click</a>
              </div>
              <a id="glyp" class="file" ng-show="div_1"> {{div_1}}</a>
              <div class="contenth2">one</div>
            </div>
            <div class="normal-div" id="div-2">
             <div class="contenth1">
                 <a class="expansion-btn exp-2">click</a>
              </div>
              <a  id="glyp" class="duplicate" ng-show="div_2"> {{div_2}}</a>
              <div class="contenth2">two</div>
            </div>
            <div class="normal-div" id="div-3">
              <div class="contenth1">
                <a class="expansion-btn exp-3">click</a>
              </div>
              <a id="glyp" class="eye" ng-show="div_3">{{div_3}} </a>
              <div class="contenth2">three</div>
            </div>
          </div>

​