how to change a css class when all tabs are closed in ui.bootstrap.accordion - angular-ui-bootstrap

Question

How can I change a css class when all the tabs in ui.bootstrap.accordion are closed,for instance if the tabs were closed because another tab triggered them to close, the ng-class expression won't run and won't change the icon.
This is the view
<uib-accordion>
<uib-accordion-group ng-repeat="item in portafolio | orderBy : 'order' " ng-click="item.opened=!item.opened">
<uib-accordion-heading>
<i class="fa fa-lg" ng-class="(item.opened === true) ? 'fa-minus-circle':'fa-plus-circle'"></i>
<span>{{item.name}}</span>
<i class="pull-right fa fa-lg" ng-class="{'fa-caret-down': true === item.opened, 'fa-caret-right': false === item.opened}"></i>
</uib-accordion-heading>
<div ng-include="'modules/widgets/portafolio/tpl/'+item.type+'.html'"></div>
</uib-accordion-group>
</uib-accordion>
And in the controller I have this.
$scope.portfolio = [
{ type: 'Balance', order:1, name:'current balance', opened: false},
{ type: 'Credits', order:2, name:'Credits', opened: false},
{ type: 'Investments', order:3, name:'Investments', opened: false}
];
I tried to use the ng-class directive in order to evaluate if the item.opened was true or false,but when the tabs were closed because another tab closed them, the item.opened wont update.
Indeed, I've researched that with $watch I can "watch" for changes and run a function, I saw that when I click on one tab, a css class '.panel-open'is added ,but how can I watch that div element that the css class has been added in order to update the i class elements.
Thanks.

Answer 1

Well, you basically want to watch for any changes in your portfolios array, when all of the opened properties are false, trigger a value bound to $scope that will change a class, preferably using something like ng-class (this will also work using ng-style).
Because you watch an array, you should using $watchCollection instead of plain old $watch
$scope.$watchCollection(function() {
return $scope.portfolio.every((item) => {
return item.opened === false;
})
}, function(newValue, oldValue) {
$scope.value = newValue;
})
Array.prototype.every will return true if all the items in an array return true on a predicate function, in this case, all of the .opened properties are false.
Then setup something like
ng-class="{'btn-primary': value, 'btn-success': !value}"
Here's a plunker
Your question was kind of hard to understand, comment if I didn't cover something.