AngularJS сферу. $ По настройке сферы, не отраженные в пользовательском интерфейсе

Question

Следующий код работает, как ожидалось, и scope.checked значение отражается в пользовательском интерфейсе обычно

.directive('comparisonSlider', 
    function() { 
     return{ 
      restrict: 'E', 
      templateUrl: '/app/reports/comparison-slider.html', 
      controller: function ($scope, $rootScope) { 
       $scope.checked = false; 
       $rootScope.$on('compare', 
         function() { 
          $scope.checked = true; 
         }, 
         true); 
      } 
     } 
    } 
) 

, но следующий код также работает, но изменения объем не отражен в пользовательском интерфейсе.

.directive('comparisonSlider', 
    function() { 
     return{ 
      restrict: 'E', 
      templateUrl: '/app/reports/comparison-slider.html', 
      controller: function ($scope, $rootScope) { 
       $scope.checked = false; 
       $rootScope.$on('compare', 
         function() { 
          $scope.checked = !$scope.checked; 
         }, 
         true); 
      } 
     } 
    } 
) 

Любые идеи?

Answer 1

Это работает, как и ожидалось, не знаю, почему другой не

.directive('comparisonSlider', 
    function() { 
     return{ 
      restrict: 'E', 
      templateUrl: '/app/reports/comparison-slider.html', 
      controllerAs: 'sliderCtrl', 
      controller: function ($scope, $rootScope) { 
       var self = this; 
       self.checked = false; 
       $rootScope.$on('compare', 
         function() { 
          self.checked = !self.checked; 
         }, 
         true); 
      } 
     } 
    } 
) 

Answer 2

Попробуйте изменить:

self.checked = !self.checked; 

к:

self.checked = false;