Угловое свойство boolean не обновляет внешнюю директиву

Question

Я сделал один сниженный snippet моей проблемы. На самом деле я делаю приложение с использованием ионных, но это не имеет значения, проблема возникает и в плунжере.

Я также прочитал это answer и обновил некоторые из моего кода, но проблема не устранена.

---

У меня есть этот контроллер с object:

app.controller('myCtrl', function($scope) { 
    $scope.object = { 
    boolean: true, 
    btn1: 'Do it be TRUE', 
    btn2: 'Do it be FALSE' 
    } 
}) 

И я хочу, чтобы изменить его свойство boolean внутри этой директивы:

.directive('myDirective', function() { 
    return { 
    template: '<button class="btn btn-default">{{$obj.btn1}}</button>' 
    + ' <button class="btn btn-default">{{$obj.btn2}}</button>', 
    restrict: 'A', 
    scope: { $obj: '=myDirective' }, 
    link: function(scope, element, attrs) { 
     var listener = scope.$watch('$obj', function() { 
     if (scope.$obj) listener(); 
     else return; 

     var buttons = element.find('button'), 
      btn1 = buttons.first(), 
      btn2 = buttons.last(); 

     if(scope.$obj.boolean){ 
      btn1.addClass('selected'); 
      $('#Log').html('true'); 
     }else { 
      btn2.addClass('selected'); 
      $('#Log').html('false'); 
     } 

     buttons.on('click', function(){ 
      buttons.removeClass('selected'); 
      $(this).addClass('selected'); 

      var isTrue = this === btn1[0]; 
      $('#Log').html(String(isTrue)); // works 
      scope.$obj.boolean = isTrue; // does not works 
     }); 

     }); 
    } 
    } 
}); 

Как вы можете увидеть во время работы plunker, угловой журнал не обновляется, как jQuery, и я даю одинаковое значение.

Я борюсь с этим по часам, любая помощь будет действительно восприимчивой, спасибо за ваше время.

Answer 1

Вы должны уведомить Угловое, что-то изменилось:

scope.$apply(function() { ... }); 

См plunker

P.S. используйте ng-click вместо jQuery click event.