angular.module('MyModule', [])

.directive('visible', function() {

  return {
    restrict: 'A',

    link: function(scope, element, attributes) {
        scope.$watch(attributes.visible, function(value){
          element.css('visibility', value ? 'visible' : 'hidden');
        });
    }
  };
})

.controller('MyController', function($scope) {
  $scope.showButton = true;
});

<div class="container">
        <button ng-click="isShown = !isShown" type="button">Toggle</button>
</div>

<embed visible='showButton = !showButton' src="www.example.com/pdf2.pdf" width="500" height="500" type='application/pdf' id="myPdf2">

describe('Embed Control', function() {
"use strict";

var spyEvent;

beforeEach(angular.mock.module('MyModule'));

it('Visibily hidden when toggled', function() {

    spyEvent = spyOnEvent('toggleBtn', 'click')
    $('#toggleBtn').trigger("click");

    expect('click')toHaveBeenTriggeredOn('#toggleBtn')
    expect(spyEvent).toHaveBeenTriggered();
});