title: AngularJs - check condition (if - else ) when scope value change
body: <p>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.</p>
  
  <p><strong>abcd</strong> value is updating on click but if else condition not trigger. Please help </p>
  
  <p><strong>Html Code</strong></p>
  
  <pre><code>&lt;div  ng-app="MyApp" ng-controller="BaseController" id="BaseController"&gt;
     {{abcd}}{{test}}
  &lt;/div&gt;
  &lt;ul&gt;
      &lt;li class="btn" data-id="One"&gt;&lt;a href="#"&gt;One&lt;/a&gt;&lt;/li&gt;
      &lt;li class="btn" data-id="Two"&gt;&lt;a href="#"&gt;Two&lt;/a&gt;&lt;/li&gt;
      &lt;li class="btn" data-id="Three"&gt;&lt;a href="#"&gt;Three&lt;/a&gt;&lt;/li&gt;
      &lt;li class="btn" data-id="Four"&gt;&lt;a href="#"&gt;Four&lt;/a&gt;&lt;/li&gt;
      &lt;li class="btn" data-id="Five"&gt;&lt;a href="#"&gt;Five&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p><strong>Angular JS  Code</strong></p>
  
  <pre><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';
  
      }
  }]);
  </code></pre>
  
  <p><strong>Javascript Code</strong></p>
  
  <pre><code> $('.btn').on('click',function(){
      var target = $(this).attr('data-id');
       var scope = angular.element($("#BaseController")).scope();
       scope.$apply(function(){
              scope.abcd = target;
      })
  
  });
  </code></pre>