title: How to conditionally insert HTML after AngularJs Directive paired with ngRepeat?
body: <p>=================</p>
  
  <p><strong>First of I just want to say that I'm new to this AngularJs business (started earlier today) and I probably over complicate things.</strong></p>
  
  <p>With that being said let's get down to business, shall we?</p>
  
  <p>I have the following <a href="http://jsfiddle.net/engstrumpan/yCv79/" rel="nofollow">jsFiddle</a> and the html output is as follows.</p>
  
  <pre><code>&lt;div ng-app="test" ng-controller="About" class="hex-grid clearfix ng-scope"&gt;
      &lt;div class="hex odd" ng-repeat="person in ledning"&gt;
          &lt;a href=""&gt;
             &lt;div class="inner"&gt;
                 &lt;h3 class="ng-binding"&gt;Just a name&lt;/h3&gt;
                 &lt;hr class="grid-1 center"&gt;
                 &lt;p class="ng-binding"&gt;a title&lt;/p&gt;
             &lt;/div&gt;
             &lt;div class="hex-1"&gt;
                 &lt;span class="after"&gt;&lt;/span&gt;
             &lt;/div&gt;
             &lt;div class="hex-2"&gt;
                 &lt;span class="after"&gt;&lt;/span&gt;
             &lt;/div&gt;
             &lt;span class="after"&gt;&lt;/span&gt;
          &lt;/a&gt;
      &lt;/div&gt;
     &lt;!-- and 5 times more --&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>Now</strong>, What I want to achieve is this --><a href="http://jsfiddle.net/engstrumpan/yCv79/4/embedded/result/" rel="nofollow">http://jsfiddle.net/engstrumpan/yCv79/4/embedded/result/</a>. </p>
  
  <p>This is just plain html (no AngularJs) just to demonstrate what I want to achieve. This particular layout was achieved by inserting <code>&lt;br /&gt;</code> after hexagon <strong>3</strong> and <strong>5</strong></p>
  
  <p>Imagine now if I want a layout like so</p>
  
  <pre><code> 1 1 1                1
  1 1 1 1   or even    1 1
   1 1 1              1 1 1
                     1 1 1 1
                      1 1 1
                       1 1
                        1
  </code></pre>
  
  <p>How would one go about implementing this?
  This directive is used multiple times so I want it to be as generic as possible.</p>
  
  <p><strong>What I've tried so far is</strong> is the following</p>
  
  <pre><code>var app = angular.module('test', []);
  app.controller('About', function ($scope) {
      $scope.ledning = [
        {
          ...
          shouldBreak: true
        }
  });
  app.directive('hexagon', function () {
      var tmpl = '&lt;div&gt;
                     &lt;!-- directive template snippet --&gt;
                  &lt;/div&gt;
                  &lt;br ng-show="{{data.shouldBreak}}" /&gt;';
  
    // rest  of code
  });
  </code></pre>
  
  <p>This <code>&lt;br ng-show="{{data.shouldBreak}}" /&gt;</code> won't work since AngularJs throws an exception with the following message <code>Template must have exactly one root element.</code></p>
  
  <p><strong>Also</strong> messing with <code>compile</code> on the directive like so but that results only in the <code>&lt;br /&gt;</code> being inserted after the very last iteration (after the repeater is done working)</p>
  
  <pre><code>var app = angular.module('test', []);
  app.directive('hexagon', function () {
     return { 
       ...
       compile: function($scope, el, attrs){
          return function ($scope, el, attrs){
              if($scope.data.shouldBreak !== undefined){
                  el.after('&lt;br /&gt;');
              }
          };
       }
      }
  });
  </code></pre>
  
  <p>I've read the documentation when it comes to directives and either I'm just stupid or I'm missing the obvious so please help me out.</p>
  
  <p>End of walloftext and maybe some sleep will do the trick. Jump back on the horse tomorrow so to speak.</p>