Button side incorrect when dir=rtl

Using div bar and buttons, I’ve a problem with 2nd button overlaying the first one if the direction is RTL.
Here is a codepen in rtl
NB with standard ltr: codepen seems ok.
Tested on chrome, and samsung browser

As a noob in this great framework, I got other questions:
1 - why does the whole bar and list disapear if I don’t specify class="has-subheader" in <ion-content> ?
2 - why is my first line (toto1) not displayed in <ion-item ng-repeat> ?
3 - is it possible to change the appearance of the sencond button to be badge like ?

thx in advance


    <ion-content class="has-subheader">
        <div class="bar bar-positive button-bar">
          <div class="buttons">
                <button class="button button-icon icon "
                        ng-class="data.showCat ? 'icon ion-ios-minus-outline' : 'icon ion-ios-plus-outline'"
                  ng-click="data.showCat = !data.showCat"></button>
                <div div class="h3 title" >שלום Collapsible menu</div>
                <button ng-show="!data.showCat" class="button button-assertive"
                    ng-click="data.showCat = !data.showCat">
        <div id="idLinksCat" class="list" ng-show="data.showCat" >
                <ion-item ng-repeat="item in dataLinksCat" 
                          href="{{item.url}}" >
                  {{ item.title }}


angular.module('ionicApp', ['ionic'])
.controller('MyCtrl', function($scope) {
    $scope.data = {
    showCat: false
    $scope.dataLinksCat = [
    { url: 1, title: "toto1" },
    { url: 2, title: "toto2" },
    { url: "http://ionicframework.com", title: "ionic" },
    { url: "http://forum.ionicframework.com/", title: "forum" },
    { url: 5, title: "toto5" }
  $scope.isShowCat = function() {
    return $scope.showCat;
   $scope.toggleShowCat = function() {