angular model updating and value got lost once execution complete using jquery click function?

Question

In this example while we click on the click link:-

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

Am updating this value dynamical some thing like this:-

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;
      }
  }

while i debug that time model value changing properly in scope(if expand second one $scope.div_1 & $scope.div_3 become false and $scope.div_2 become true) but its not updating UI and model got lost and also value changes previous value can any one help on this...

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>

Answer 1

While using angular always try to use the angular methods wherever possible.

you can achieve the desired functionality using ng-click. With ng-click you can pass the vent information, using which you can get the element and perform rest of the action.

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

app.controller('MainCtrl', function($scope) {

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

  $scope.update = function(event) {
   
    var elem = event.target;

    classes = elem.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" ng-click="update($event)">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" ng-click="update($event)">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" ng-click="update($event)">click</a>
    </div>
    <a id="glyp" class="eye" ng-show="div_3">{{div_3}} </a>
    <div class="contenth2">three</div>
  </div>
</div>

you can also call $scope.$apply() at the end of your JQuery function to get the similar result but angular way is more preferable.