How fire event when item expanded?

Question

I use in my angularjs project bootstrap accordion.

Here is working plunker

When I expand accordion I want to fire function in my controller named fireOnExpand and pass the appropriate Id of the group to the function.

Here is how I use accordion:

  <div ng-controller="MainCtrl">
    <uib-accordion>
      <uib-accordion-group heading="{{group.title}}" ng-repeat="group in groups" ng-init="isOpen = $first" is-open="isOpen">

        <uib-accordion-heading>
          <span ng-click="fireOnExpand()"></span>
          <div class="text-center text-info">
            <strong>{{group.title}}</strong>
          </div>
        </uib-accordion-heading>
        {{group.content}} {{test}}
      </uib-accordion-group>
    </uib-accordion>

Here is items from controller that displayed:

  $scope.groups = [
    {Id: 5, title: "Dynamic-1", content: "Dynamic Group Body - 1"}, 
    {Id: 8, title: "Dynamic-2", content: "Dynamic Group Body - 2"}, 
    {Id: 1, title: "Dynamic-3", content: "Dynamic Group Body - 3"},
    {Id: 3, title: "Dynamic-4", content: "Dynamic Group Body - 4"}];

Here the function in controller that I wont to fire on expand:

  $scope.fireOnExpand = function() 
  {
    alert("ParamPamPam");
  };

For example:

If accordion item with header text "Dynamic-2" was expanded I want trigger fireOnExpand event handler and pass to the event appropriate Id(i.e. Id=8).

How can I fire function fireOnExpand and pass appropriate Id parameter when accordion item is expanded?

Answer 1

see Event Bubbling

change this

<span ng-click="fireOnExpand()"></span>
<div class="text-center text-info">
    <strong>{{group.title}}</strong>
</div>

to

<span ng-click="fireOnExpand(group.Id)"> 
     <div class="text-center text-info">
       <strong>{{group.title}}</strong>
     </div>
</span>

if you want to execute fireOnExpand on header text only, then move the ng-click to strong tag

<span> 
      <div class="text-center text-info">
           <strong ng-click="fireOnExpand(group.Id)">{{group.title}}</strong>
      </div>
</span>

Plunker