Решил попробовать, так как столкнулся с тем что при усложнении приложения начала хромать вёрстка...
К сожалению, нормального API я не нашёл, может кто подскажет.
То что здесь совсем никакое
http://mobileangularui.com/docs/sidebars/
Конкретно.
1. Как сделать sidebar-right аналогичную sidebar-left, т.е. что бы по умолчанию она была активна и не закрывалась при клике на любую область кроме sidebar-right.
2. Как установить значения true/false по дефолту для состояния sidebars (свёрнуты или нет) - пробовал ng-model, ui-state - не помогает.
<body ng-app="myApp" ng-controller="AlertDemoCtrl">
<!-- Sidebars -->
<div class="sidebar sidebar-left">
<div class="scrollable">
<h1 class="scrollable-header app-name">My App</h1>
<div class="scrollable-content">
<div class="list-group" ui-turn-off='uiSidebarLeft'>
<a class="list-group-item" href="#/link1">Link 1
<i class="fa fa-chevron-right pull-right"></i></a>
<a class="list-group-item" href="#/link2">Link 2
<i class="fa fa-chevron-right pull-right"></i></a>
</div>
</div>
</div>
</div>
<div class="sidebar sidebar-right">
<div class="scrollable">
<h1 class="scrollable-header app-name">Control</h1>
<div class="scrollable-content">
<div class="list-group" >
<a class="list-group-item" href="#/link3">Sensors
<i class="fa fa-chevron-right pull-left"></i></a>
<a class="list-group-item" href="#/link4">Link 4
<i class="fa fa-chevron-right pull-left"></i></a>
</div>
</div>
</div>
</div>
<div class="app" >
<div class="navbar navbar-app navbar-absolute-top"><!-- Top Navbar -->
<div class="btn-group pull-left">
<div ui-toggle="uiSidebarLeft" class="btn sidebar-toggle">
<i class="fa fa-bars fa-4x"></i>
</div>
</div>
<div class="btn-group pull-right" >
<div ui-toggle="uiSidebarRight" class="btn btn-group">
<i class="fa fa-github-alt fa-4x" ></i>
</div>
</div>
</div>
<div class="navbar navbar-app navbar-absolute-bottom"><!-- Bottom Navbar -->
Collapsible Group Item bottom
</div>
<!-- App body -->
<div class='app-body'>
<div class='app-content'>
<div class="panel-group" ui-state="myAccordion" ui-default="2" style="padding-top: 3%">
<div class="panel panel-default" ng-repeat="i in [1,2,3]">
<div class="panel-heading" ui-set="{'myAccordion': i}">
<h4 class="panel-title">
Collapsible Group Item #{{i}}
</h4>
</div>
<div ui-if="myAccordion == {{i}}">
<div class="panel-body">
{{lorem}}
</div>
</div>
</div>
</div>
<ng-view>body</ng-view>
</div>
</div>
</div><!-- ~ .app -->
<!-- Modals and Overlays -->
<div ui-yield-to="modals">
</div>
</body>