$emit event not working with ng-if

I got new requirement to implement, so I had to render the directive based on the condition.

<div ng-app="myApp">

  <body-dir>

    <icon-dir> 
    </icon-dir>

    <filter-dir>
     </filter-dir>

    <widget-dir ng-if="someCondition">
    </widget-dir>

  </body-dir>
</div>

From above directive structure, I'm trying to render 'widget-dir' based on the someCondition property.

Todo that I'm emitting the event from <filter-dir> and catching the event in widget-dir which is not working.

If I remove the ng-if it's working fine.

Below things I understood from various sources:

• ng-if creating the new scope. But according to the angular doc, the newly created scope will inherit from the parent.

  So, it should share the body-dir scope? If it is shared then whatever we are emitting the event from <filter-dir>, should catch in widget-dir ?

Above functionality is working fine If I remove the ng-if. Here, I couldn't understand what exactly happening.

I know $emit event purpose is to catch the event in a parent. Earlier I caught the event in a sibling as it shared from the parent scope(Is this is best practice ?).

Update: Here one more thing I noticed that if I put ng-if on directive child element(Not to the directive) then it's working as expected. In below code I put ng-if on template element. Here, just I'm trying to understand how the angular scope works with ng-if.

angular.module('app').directive('widgetDir', function(){
  return {
    template: '<br><span ng-if="true">I\'m in "ng-if"</span>',
    link: function(scope, element, attrs){
  scope.$on('evt-filter', function(evt, data){
    alert(data);
  });
    }
  }
})

Could anyone please clear this.

Issue reproducible here