AngularJs accordion not opening with is-open attribute - angularjs

Question

I encountered a strange problem. I had written my own directive. I am trying to use
is-open
attribute to specify when accordion group needs to be opened based on model named $scope.state. Unfortunately it's property isOpen is always false, even when it is changing to true in checked() function.
Directive.html
<accordion>
<accordion-group class="my-panel-body" ng-class="{'my-panel-heading-checked':state.isOpen,'my-panel-heading-default':!state.isOpen}" is-open="state.isOpen">
<!--Accordion header -->
<accordion-heading id="{{groupId}}" >
<div ng-click="checked()" >
<i class="pull-left glyphicon" ng-class="status"></i> {{title}}
</div>
</accordion-heading>
<!--Accordion content -->
</accordion-group>
</accordion>
Directive.js
angular.module('locale').
directive('accordionList', function () {
return{
restrict: 'A',
scope: {
title: '=',
result: '=',
groupId: '='
},
templateUrl: 'html/accordionList.html',
controller: function($scope){
var glyphicon = 'glyphicon glyphicon-';
var status = glyphicon + 'unchecked';
$scope.state = {
isOpen: false
}
$scope.status = status;
$scope.checked = function(){
console.log($scope.state.isOpen) //It is always false!
if ($scope.state.isOpen) {
$scope.state.isOpen = false;
$scope.status = status;
}
else { //Always entering this part of code!
console.log("FLAG");
$scope.state.isOpen = true; //True only here when invoked.
$scope.status = glyphicon + 'check';
console.log($scope.state.isOpen);
}
}
}
};
});
I would be grateful for any help. I have no idea what is not working.

Answer 1

Based on your provided code, I created a plunker to reproduce your issue and it does show the problem.
The fact is that the accordion-group directive will auto bind a toggleOpen function to click event (see the template). In this case, with your own checked function your isOpen value is changed twice when element get clicked, and thus remains unchanged.
so just eliminate the 'check()' or stop changing isOpen value in it.
$scope.checked = function(){
console.log($scope.state.isOpen) //It is always false!
if ($scope.state.isOpen) {
//$scope.state.isOpen = false;
$scope.status = status;
}
else { //Always entering this part of code!
console.log("FLAG");
// $scope.state.isOpen = true; //True only here when invoked.
$scope.status = glyphicon + 'check';
console.log($scope.state.isOpen);
}
}