Status.Open not returning any value in Angular UI bootstrap Accordion

Question

I am facing an issue with accordion of angular ui bootstrap. I am using accordion to show FAQs in my application.Now issue is "status.open" is not returning any value due to which 'chevron icon' class is not toggling.

Please see below code:

 <div>
 <accordion close-others="true">
   <accordion-group ng-repeat="faq in FAQs">
    <accordion-heading>
    <div>
       {{faq.title}}<i class="pull-right glyphicon" ng-class="{'glyphicon-chevron-up': status.open, 'glyphicon-chevron-down': !status.open}"></i>
    </div>
    </accordion-heading>
    <div  ng-bind-html="faq.description"></div>
        </accordion-group>
</accordion>
</div>

I am using accordion through my own app and controller.

function ($scope, FAQService) {
         $scope.FAQs = [];
          $scope.GetFAQByCategory = function() {
            $scope.response = '';
            var responsePromise = FAQService.GetFAQs();
            responsePromise.then(function(faqData) {
            $(faqData).each(function(index, key) {
                     $scope.FAQs.push(
                     {
                     title: faqData[index].Title,
                     description: faqData[index].Description, 
                     category: faqData[index].Category.Label 
                     }); 
                    } );                             
            });
             if (!$scope.$root.$$phase) {
                    $scope.$apply();
                }
        };

Answer 1

I found solution of my problem :). Added

is-open="this.open"

<accordion-group ng-repeat="faq in FAQs" is-open="this.open">