title: Angularjs converting code to directive or ng-repeat
body: <p>I am currently trying to convert an json response into jquery accordion.  I have got the code working, and would like to clean up my code to make more sense.  Currently I hard codded to get it to work, from there I tried an ng-repeat and I couldn't get that to work b/c it created a  around each collapsible div and resulted in weird results, my next guess would be to turn it into a directive and I am not sure how to do that without having the same results as the ng-repeat.  I created a Plunker to help visualize this issue.  </p>
  
  <p><a href="http://plnkr.co/edit/e9h8H3URNJ4SunQtIPea?p=preview" rel="nofollow">http://plnkr.co/edit/e9h8H3URNJ4SunQtIPea?p=preview</a></p>
  
  <blockquote>
    <p>KEY NOTE : The structure of the html can not change b/c of inherited CSS that cannot be changed.  </p>
  </blockquote>
  
  <p>Any help or point in the right direction would be nice.  At this point I would accept a proper working ng-repeat, or convert it to a directive that works. </p>
  
  <p>Here is the JSON</p>
  
  <pre><code>$scope.documentTypes= [{"name":"name1","links": [{"rel":"self","href":"url1"}]},
  {"name":"name2","links":[{"rel":"self","href":"url2"}]},
  {"name":"name3","links":[{"rel":"self","href":"url3"}]},
  {"name":"name4","links":[{"rel":"self","href":"url4"}]}];
  </code></pre>
  
  <p>Proper working code:</p>
  
  <pre><code>&lt;div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist"&gt;
          &lt;h3 tabindex="0"
              ng-click="setVariable(documentTypes[0])"
              class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
              role="tab" aria-selected="false"
              aria-controls="ui-accordion-accordion-panel-0"&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;
              &lt;a href="#" style="font-size: .8em;"&gt;
                  {{documentTypes[0].name}}
              &lt;/a&gt;
          &lt;/h3&gt;
  
          &lt;div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
               role="tabpanel" aria-expanded="false" aria-hidden="true"
               aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;"&gt;
              &lt;p style="height:150px;"&gt;
                  {{documentTypes[0]}}
  
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;h3 tabindex="0"
              ng-click="setVariable(documentTypes[2])"
              class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
              role="tab" aria-selected="false"
              aria-controls="ui-accordion-accordion-panel-0"&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;
              &lt;a href="#" style="font-size: .8em;"&gt;
                  {{documentTypes[1].name}}
              &lt;/a&gt;
          &lt;/h3&gt;
  
          &lt;div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
               role="tabpanel" aria-expanded="false" aria-hidden="true"
               aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;"&gt;
              &lt;p style="height:215px;"&gt;
                  {{documentTypes[1]}}
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;h3 tabindex="0"
              ng-click="setVariable(documentTypes[3])"
              class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
              role="tab" aria-selected="false"
              aria-controls="ui-accordion-accordion-panel-0"&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;
              &lt;a href="#" style="font-size: .8em;"&gt;
                  {{documentTypes[2].name}}
              &lt;/a&gt;
          &lt;/h3&gt;
          &lt;div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
               role="tabpanel" aria-expanded="false" aria-hidden="true"
               aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding-left:2px; margin:0px;"&gt;
              &lt;p style="height:215px;"&gt;
                  {{documentTypes[2]}}
  
              &lt;/p&gt;
          &lt;/div&gt;
          &lt;h3 tabindex="0"
              ng-click="setVariable(documentTypes[0])"
              class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
              role="tab" aria-selected="false"
              aria-controls="ui-accordion-accordion-panel-0"&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;
              &lt;a href="#" style="font-size: .8em;"&gt;
                  {{documentTypes[3].name}}
              &lt;/a&gt;
          &lt;/h3&gt;
          &lt;div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
               id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
               aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;"&gt;
              &lt;p style="height:215px;"&gt;
                  {{documentTypes[3]}}
              &lt;/p&gt;
          &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>
  
  <p>ng-repeat :</p>
  
  <pre><code>  &lt;h1&gt;Trying NG-Repeat&lt;/h1&gt;
  &lt;div class="ui-accordion ui-widget ui-helper-reset accordion" id="accordion" role="tablist"&gt;
    &lt;div ng-repeat="docs in documentTypes"&gt;
      &lt;h3 tabindex="0"
              ng-click="setVariable(docs)"
              class="ui-accordion-header ui-helper-reset ui-state-default ui-accordion-icons ui-corner-all"
              role="tab" aria-selected="false"
              aria-controls="ui-accordion-accordion-panel-0"&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;&lt;span
                  class="ui-accordion-header-icon ui-icon ui-icon-triangle-1-e"&gt;&lt;/span&gt;
              &lt;a href="#" style="font-size: .8em;"&gt;
                  {{docs.name}}
              &lt;/a&gt;
      &lt;/h3&gt;
      &lt;div class="ui-accordion-content ui-helper-reset ui-widget-content ui-corner-bottom box1_flex"
               id="ui-accordion-accordion-panel-0" role="tabpanel" aria-expanded="false" aria-hidden="true"
               aria-labelledby="ui-accordion-accordion-header-0" style="display: none; padding:0px; padding-left:2px; margin:0px;"&gt;
        &lt;p style="height:215px;"&gt;
            {{docs}}
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;  
  </code></pre>