extend angular-carousel directive (template + ng-show binding)

Question

I'm trying to extend 'rnCarouselControls' directive of revolunet/angular-carousel. I want to extend it with hiding logic (hide arrows) when there is no focus on image. I've read 'Understanding Directives' article and seems that stacking technique could help but can't get it working. Tried https://stackoverflow.com/a/19228302/1407492 this solution with

app.directive('rnCarouselControls', function ($compile) {
      return {
          restrict: 'A',
          replace: true,
          priority: 1000,
          terminal:true,
          compile: function compile(element, attrs) {
              element.removeAttr("rn-carousel-controls");
              element.attr('ng-show', '$parent.activecontrols');
              return {
                  pre: function preLink(scope, iElement, iAttrs, controller) { },
                  post: function postLink(scope, iElement, iAttrs, controller) {
                      $compile(iElement)(scope);

                  }
              };
          }
      };
  })

if terminal=true then second directive doesn't trigger. from accepted answer:

When our custom directive is compiled, it will modify the element by adding directives and removing itself and use $compile service to compile all the directives (including those that were skipped).

not true for this directive.

Answer 1

So, as I commented the solution is to make it by only css:

.carousel-control{
  visibility:hidden;
}

And then show it when

carousel:focus .carousel-control{
  visibility:visible;
}