title: AngularJS ng-repeat and jQuery accordion
body: <p>I'm trying to create an accordion tree menu using AngularJS ng-repeat and jQuery accordion widget.  Here is what I have so far:</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
      &lt;div ng-controller="PersonFavoritesController"&gt;
          &lt;ul&gt;
              &lt;li ng-repeat="item in favorites.Folders"&gt;
                  &lt;div class="folder-toggle"&gt;
                      &lt;h3&gt;
                          &lt;i class="fa fa-folder"&gt;&lt;/i&gt;                                   
                          {{item.FolderLabel}}
                      &lt;/h3&gt;
                      &lt;div&gt;
                          {{item.Folders.length}}&lt;br /&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
  
              &lt;/li&gt;
              &lt;li ng-repeat="item in favorites.CurrentItems"&gt;
                  {{item.ItemLabel}}
              &lt;/li&gt;
          &lt;/ul&gt;             
      &lt;/div&gt;
  &lt;/div&gt; 
  </code></pre>
  
  <p>JS</p>
  
  <pre><code>$(document).ready(function () {
  
          $(".folder-toggle").accordion({
              collapsible: true,
              active: false
          });
  </code></pre>
  
  <p>The tree menu displays but it cannot be expanded or collapsed</p>