title: Wrapping Foundation 4 reveal in Angular
body: <p>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 <a href="http://foundation.zurb.com/docs/components/reveal.html" rel="noreferrer">http://foundation.zurb.com/docs/components/reveal.html</a> component.</p>
  
  <p>Straight-forward approach seemed to be to wrap as directives:</p>
  
  <pre><code>directive('modal', function() {
      return {
          template: '&lt;div ng-transclude id="notice" class="reveal-modal"&gt;' +
                    '&lt;a close-modal&gt;&lt;/a&gt;' +
                    '&lt;/div&gt;',
          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: '&lt;a ng-transclude href="#" class="close-reveal-modal"&gt;x&lt;/a&gt;',
          restrict: 'A',
          transclude: true,
          replace: true
      }
  }).
  directive('showModal', function() {
      return {
          template: '&lt;a ng-transclude class="reveal-link" data-reveal-id="notice" href="#"&gt;&lt;/a&gt;',
          restrict: 'A',
          transclude: true,
          replace: true,
      }
  });
  </code></pre>
  
  <p>This works fine up to a point, for example, I can use the modal to show different notices from a template:</p>
  
  <pre><code>  &lt;modal done=""&gt;
      &lt;div ng-include src="'partials/notices/' + notice + '.html'"&gt;&lt;/div&gt;
    &lt;/modal&gt;
    &lt;select ng-model="notice" ng-options="n for n in ['notice-1', 'notice-2']"&gt;
        &lt;option value=""&gt;(blank)&lt;/option&gt;
    &lt;/select&gt;
    &lt;a show-modal&gt;show modal&lt;/a&gt;
  </code></pre>
  
  <p>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 <code>$watch</code>). I'm assuming my  directive needs a controller to trigger click, but would be good Angular practise?</p>