Angular UI Bootstrap: Make accordion save state

Question

How can I make the accordion in Angular UI Boot strap save its state?

The behaviour I'd like is what a user clicks on a link inside the accordion, then later clicks back, the same groups are expanded as before.

If it helps, I'm using an SPA with ui-router, and I'm happy to save the state it a cookie.

I've not got very far because I haven't figured out how to read the accordion's state, let alone save it.

Answer 1

Just like this:

<accordion>
    <accordion-group heading="Scrooge Mcduck" is-open="storage.mcduck" ng-click="select('mcduck')">
        Quack Wealthy!
    </accordion-group>
    <accordion-group heading="LaunchPad Mcduck" is-open="storage.launchpad" ng-click="select('launchpad')">
        Quack Pilot!
    </accordion-group>
</accordion>

controller

angular.module('myApp').controller('AccordionController', function ($scope, DuckStorage) {
  $scope.storage = DuckStorage;
  $scope.select  = function(duck) {
    DuckStorage[duck] = !DuckStorage[duck];
  }
});

service:

angular.module('MyApp').factory('DuckStorage', function () {
  return {};
});