Wrapping Foundation 4 reveal in Angular

New to Angular, just trying to get some harmony with Zurb Foundation 4. A case in point; I am trying to make use of the http://foundation.zurb.com/docs/components/reveal.html component.

Straight-forward approach seemed to be to wrap as directives:

directive('modal', function() {
    return {
        template: '<div ng-transclude id="notice" class="reveal-modal">' +
                  '<a close-modal></a>' +
                  '</div>',
        restrict: 'E',
        transclude: true,
        replace: true,
        scope: {
            'done': '@',
        },
        transclude: true,
        link: function(SCOPE, element, attrs, ctrl) {
            SCOPE.$watch('done', function (a) {
                // close-modal
            });
        }
    }
}).
directive('closeModal', function() {
    return {
        template: '<a ng-transclude href="#" class="close-reveal-modal">x</a>',
        restrict: 'A',
        transclude: true,
        replace: true
    }
}).
directive('showModal', function() {
    return {
        template: '<a ng-transclude class="reveal-link" data-reveal-id="notice" href="#"></a>',
        restrict: 'A',
        transclude: true,
        replace: true,
    }
});

This works fine up to a point, for example, I can use the modal to show different notices from a template:

  <modal done="">
    <div ng-include src="'partials/notices/' + notice + '.html'"></div>
  </modal>
  <select ng-model="notice" ng-options="n for n in ['notice-1', 'notice-2']">
      <option value="">(blank)</option>
  </select>
  <a show-modal>show modal</a>

However, where it gets sticky is if I want to trigger close-modal/ show-modal from a controller/ on a certain event (e.g. within $watch). I'm assumin