Component doesn't react on scope change from its controller - angularjs

Question

I have two simple components which communicate using require. The problem is that variable changed in the function is not reflected in the component view. See the example below.
<wizard-element data-active="true">First
<wizard-test></wizard-test>
</wizard-element>
<wizard-element>Second
<wizard-test></wizard-test>
</wizard-element>
The components are simple and by clicking deactivate the wizard-element should be invisible, but it doesn't.
Wizard-element is a wrapper component responsible for showing and hiding. The wizard-test has buttons to show or hide and communicate with wizard-element by require.
component('wizardElement',{
transclude: true,
controller: ['$scope',function($scope){
this.activate = function(){
console.log('show');
this.active = true;
}
this.disactivate = function(){
console.log('hide');
$scope.active = false;
}
}],
bindings: {
'active': '=',
'step': '<'
},
template: '<div ng-show="$ctrl.active" ng-transclude></div>'
})
.component('wizardTest',{
controller: ['$scope',function($scope){
this.activate = function(){
this.wizardElement.activate();
}
this.disactivate = function(){
this.wizardElement.disactivate();
}
}],
require: {
'wizardElement' : '^^wizardElement'
},
template: '<button ng-click="$ctrl.activate()">Activate</button><button ng-click="$ctrl.disactivate()">Disactivate</button>'
});
Link to Plunker https://plnkr.co/edit/A5Hl1qYDhaMTgvvuIS11?p=preview

Answer 1

You are mixing $scope and this in your activate() and disactivate() functions.
try changing
this.disactivate = function() {
console.log('hide');
$scope.active = false;
}
To
this.disactivate = function() {
console.log('hide');
this.active = false;
}

Answer 2

Plunker example works after previous suggestion but my app doesn't even though it's as I think the same. Methods activate and disactivate are invoked but doesn't change the view. I also dump {{$ctrl}} in the wizard-element template to see the scope, but the active value doesn't change.
<wizard>
<wizard-element data-step="1" data-active="true" >First Step</wizard-element>
<wizard-element data-step="2" >Second step</wizard-element>
<button class="btn border-only center-block margin-top" wizard-next-control>Next</button>
And my JS:
authApp.component('wizardElement',{
transclude: true,
controller: ['$scope','$timeout',function($scope,$timeout){
this.active = this.active || false;
this.$onInit = function() {
this.wizardCtrl.addElement(this, this.step);
}
this.activate = function(){
console.log('show', this.step);
this.active = true;
}
this.disactivate = function(){
console.log('hide', this.step);
this.active = false;
}
}],
require:{
'wizardCtrl' : '^^wizard',
},
bindings: {
'step': '<'
},
template: '<span>val:{{$ctrl}}</span><div ng-show="$ctrl.active"><ng-transclude></ng-transclude></div>'});