accordion expanding event

by enorl76

HTML

<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<script src="https://cdn.rawgit.com/angular-ui/bootstrap/gh-pages/ui-bootstrap-tpls-2.5.0.min.js"></script>
<!-- mark this as an Angular application and give it a controller -->
<div ng-app="app" ng-controller="appCtrl">

            <uib-accordion close-others="true">
                <div uib-accordion-group>
                  <uib-accordion-heading>Accordion 1</uib-accordion-heading>
                   
                </div>
                <div uib-accordion-group expand="expand()" ng-click="expand()">
                <uib-accordion-heading>Accordion 2</uib-accordion-heading>
                
                      <img ng-if="showImage==true" ng-attr-src="{{item.mediaSrc}}" style="min-width:100px; min-height:100px;" alt="magic image" />
                    
                </div>
                <div uib-accordion-group heading="Accordion 3">
                    
                </div>
            </uib-accordion>
      
      <button ng-click="expand();">
      Click to simulate expand getting called
      </button>
      
      <pre>{{showImage}}</pre>

</div>

JavaScript

var app = angular.module('app', ['ui.bootstrap']);

// controller
app.controller('appCtrl', function ($scope) {

		$scope.item = {}
    $scope.item.mediaSrc = "https://i.imgur.com/MdVkYeOl.jpg";

    $scope.tabChange = function (args) {
       alert('tab change');
    }
    
    $scope.expand = function(args) {
    	//alert('expand');
      console.log('expand', args);
      $scope.showImage = true;
    }
    
  
    $(function () {
        $('accordion').on('show.bs.collapse', function () {
                  alert('accordion change');
        });
    });
});