Even though I can get it to work without using ng-repeat, the issue arises when I have a list of elements and is-Open doesn't function properly.
1. It should only open one panel at a time (sometimes it opens all)
2. The value of is-Open should be true when a panel is opened
3. If a user clicks on the content of a panel after opening it, I should be able to retrieve the value (similar to is-Open for the panel).
HTML
<body ng-app="myApp">
<div class="col-sm-6" ng-controller="Controller">
<div class="column-nav">
<uib-accordion close-others="oneAtATime">
<uib-accordion-group ng-repeat="group in groups" ng-scroll="group in groups" is-open="$parent.isOpen">
<uib-accordion-heading ng-model="checkTitle">
{{group.title}}
</uib-accordion-heading>
<a>{{group.content}}</a>
</uib-accordion-group>
</uib-accordion>
</div>
<div>
Panel Header Open: {{isOpen}} <br>
Panel oneAtATime: {{oneAtATime}}
</div>
</div>
</body>
App.js
myApp.controller('Controller', ['$scope', function($scope) {
$scope.isOpen = false;
$scope.oneAtATime = true;
// Data
$scope.groups = [
{
title: "Dynamic Group Header - 1",
content: "Content - 1"
},
{
title: "Dynamic Group Header - 2",
content: "Content - 2"
}
];
//log
$scope.$watch('isOpen', function(){
console.log(" watch isOpen:" +$scope.isOpen);
}, true);
}]);
Thank you for your assistance and feedback.