AngularJs - check condition (if - else ) when scope value change

Question

In my application I want to do some task when updating a scope variable. but my code is run page loading only. it is not trigger while value changes.

abcd value is updating on click but if else condition not trigger. Please help

Html Code

<div ng-app="MyApp" ng-controller="BaseController" id="BaseController">
 {{abcd}}{{test}}
</div>
<ul>
 <li class="btn" data-id="One"><a href="#">One</a></li>
 <li class="btn" data-id="Two"><a href="#">Two</a></li>
 <li class="btn" data-id="Three"><a href="#">Three</a></li>
 <li class="btn" data-id="Four"><a href="#">Four</a></li>
 <li class="btn" data-id="Five"><a href="#">Five</a></li>
</ul>

Angular JS Code

var app = angular.module('MyApp', []);
app.controller('BaseController',['$scope',function($scope){
 $scope.abcd = 'testvalue1';
 $scope.test = 'test Value 2';
 console.log($scope.abcd);
 if($scope.abcd === 'One'){
 $scope.test = 'First Time';
 }else if($scope.abcd === 'Two'){
 $scope.test = 'Second Time';
 }else if($scope.abcd === 'Three'){
 $scope.test = 'Three Time';
 }else if($scope.abcd === 'Four'){
 $scope.test = 'Four Time';
 }else if($scope.abcd === 'Five'){
 $scope.test = 'Five Time';
 }
}]);

Javascript Code

 $('.btn').on('click',function(){
 var target = $(this).attr('data-id');
 var scope = angular.element($("#BaseController")).scope();
 scope.$apply(function(){
 scope.abcd = target;
 })
});

• Deepak Ingole: god...jQuery...angular...
• Sebin Simon: yes I want to update angular variable from different script outside of angular
• Vineet: You should use watches instead
• Sebin Simon: watches.. will it affect script performance?

Answer 1

oO you should not use JQuery

<ul>
 <li class="btn" ng-click="abcd='One'"><a href="#">One</a></li>
 <li class="btn" ng-click="abcd='Two'"><a href="#">Two</a></li>
 <li class="btn" ng-click="abcd='Three'"><a href="#">Three</a></li>
 <li class="btn" ng-click="abcd='Four'"><a href="#">Four</a></li>
 <li class="btn" ng-click="abcd='Five'"><a href="#">Five</a></li>
</ul>

• Sebin Simon: no I can't use angular everywhere because its a big project and there is a possiiblity to update the same variable from different section or scripts. that is why I using jQUery + AngularJs
• ThibaudL: oh ok, I understand your issue, you should put your test inside a function and call it in your JQuery : scope.test()
• Sebin Simon: click and updating functionality working fine. Only the problem is if and else condition work only at load.
• ThibaudL: Or maybe a function taking the target as a parameter and updating your abcd then launching the test
• MagicJuly: suggest that you should not use jQuery+AngularJs even if it's a big project, with bad structure and low maintainability.

Answer 2

use $scope.$watch:

$scope.$watch('abcd', function(oldValue, newValue) {
 if (newValue === ?) {
 // do this
 }
});

also, this might help satisfy some, angular includes jquerylite:

angular.element('.btn').on('click', function() {...})

Answer 3

You have to use $scope.$watch in your controller to watch the abcd value and act upon it when it changes.

https://docs.angularjs.org/api/ng/type/$rootScope.Scope

$scope.$watch('abcd', function(val) {
 if(val === 'One') {
 doWhatever();
 }
}

• ThibaudL: Not sure it's a good idea to add a watch if it's a manual change it would be enough to add a function taking taget as a parameter and then do the affectation and the test.
• clintsmith: I try to avoid watches if I see a better way but I still wind up using them sometimes and I don't notice a big decline in performance. I guess it depends on what you are doing though. If you get too many watches I'm sure it would start to affect performance. Also, if you only need the watch to execute it's code once, you can unregister it the first time it runs. In your case I don't think that applies though.
• Sebin Simon: if I am using abcd as an jSon array, the changes in key value not updating in $scope.$watch('abcd') it update only if we assign the key manually $scope.$watch('abcd.key')
• clintsmith: As far as I know with watches on a complex object, you have 3 options: You can watch on the key(you already showed this), you can set the objectEquality parameter of the $watch to be true but be warned, in the link I posted in my answer it says "watching complex objects will have adverse memory and performance implications.", or you can use $scope.$watchCollection which will do a shallow watch of (I believe) the objects immediate properties only. This article was helpful to me: bennadel.com/blog/…