Why doesn't the data in the parent directive change?

Question

Angular

<div data-block>
        <div data-block-header>
        </div>
        <div data-block-body>
        </div>
    </div>

angular.module('app').directive('block', [function() {
  return {
    restrict: 'A',
    controller: function($scope, $element) {
      $scope.showBody = false;
      this.toggleBody = function() {
        $scope.showBody = !$scope.showBody;
      }
      $scope.$watch('showBody', function() {
        console.log('changed')
      })
    },
    link: function(scope, element, attrs, ctrl) {}
  }
}]);

angular.module('app').directive('blockHeader', [function() {
  return {
    restrict: 'A',
    require: '^block',
    template: '<div>header</div>',
    controller: function($scope, $element) {},
    link: function(scope, element, attrs, ctrl) {
      element.bind('click', function() {
        ctrl.toggleBody();
      })
    }
  }
}]);

angular.module('app').directive('blockBody', ['$http', '$templateRequest', '$compile', function($http, $templateRequest, $compile) {
  return {
    restrict: 'A',
    require:'^block',
    template: '<div ng-show="showBody">Body</div>',
    controller: function($scope, $element) {
    },
    link: function(scope,element,attrs,ctrl){
    }
  }
}]);

On click on block-header I am trying to change a variable in block that affects the display of block-body, why does the data not change? Is this normal practice?

Answer 1

use ngClick for such tasks, and read up on the $digest loop.
ps since you are just starting, read