title: How to display data in angular accordion differently for each accordion
body: <p>I am using angular accordion.  It will display accordions based on the object size in the (ng-repeat). When I click the Accordion Heading it should make an api call and store the result in a variable (department details) and it should be displayed in the Expanded window of the accordion.</p>
  
  <p>When I click the first Accordion, it is making an API call and displaying data correctly in the Accordion window. But, When I click the second Accordion it is making an api call and now the data in both the accordions (first and second) are the same because the department details variable has the result of the second accordion api call.</p>
  
  <p>How can I display the data unique to each accordion?. Should I make all api calls in controllers itself, store the results in an array, and use it in html instead of making api calls only when I click  Accordion-heading. Thanks in Advance.</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;accordion close-others="false"&gt;
      &lt;accordion-group is-open="isopen" ng-repeat="item in object"&gt;
          &lt;accordion-heading"&gt;
              &lt;span ng-click="Ctrl.getinfo(item.id)"&gt;
                  {{item.label}}
              &lt;/span&gt;
          &lt;/accordion-heading&gt;
          &lt;div&gt; 
              {{Ctrl.departmentdetails}}
          &lt;/div&gt;
       &lt;/accordion-group&gt;
  &lt;/accordion&gt;
  </code></pre>
  
  <p>Controller:</p>
  
  <pre><code>public getinfo (departmentid): void {
      this.departmentdetails = null;
      this.services.getdepartmentdetails(departmentid).then((response):any=&gt;{
          this.departmentdetails= response;
      });
  }
  </code></pre>