Unit Testing AngularJS directive: scope event listener testing explicit for each test

I am unit testing a directive. It listens for an event, and hides/show on the even listener and also based on one property.

When I emit the event, all the listeners are being triggered. I want the emit to be specific to one spec only. How can I do that?

http://plnkr.co/edit/FkqIu8Pq2oljKB9o4B65?p=preview

// Code goes here

angular.module('myapp', []).
directive('mydirective', ['$rootScope',
  function($rootScope) {

    return {
      restrict: 'E',
      link: function(scope, element) {
        scope.$on('customEvent', function() {
          scope.customProperty ? element.hide() : element.show();
        });
      }

    };


  }
]);



//Spec

describe('mydirective Test', function() {
  var $compile, $rootScope;
  beforeEach(module('myapp'));

  beforeEach(inject(function(_$compile_, _$rootScope_) {
    $compile = _$compile_;
    $rootScope = _$rootScope_;
  }));

  it('should hide on customEvent if customProperty set', function() {
    var scope = $rootScope.$new();
    var element = $compile("<div my-directive>test</div>")(scope);
    spyOn(element, 'hide');
    scope.customProperty = true;
    scope.$emit('customEvent');
    expect(element.hide).toHaveBeenCalled();
  });

  it('should hide on customEvent and if customProperty is false', function() {
    var scope = $rootScope.$new();
    var element = $compile("<div my-directive>test</div>")(scope);
    spyOn(element, 'show');
    scope.customProperty = false;
    scope.$emit('customEvent');
    expect(element.show).toHaveBeenCalled();
  });
});