Directive for automatic resizing pane

<!DOCTYPE html>
<html>

<head>
  <link data-require="bootstrap-css@3.0.2" data-semver="3.0.2" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css" />
  <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
  <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  <script data-require="bootstrap@*" data-semver="3.0.2" src="//netdna.bootstrapcdn.com/bootstrap/3.0.2/js/bootstrap.min.js"></script>
  <script data-require="ui-bootstrap@*" data-semver="0.10.0" src="http://angular-ui.github.io/bootstrap/ui-bootstrap-tpls-0.10.0.js"></script>
  <link rel="stylesheet" href="style.css" />
  <script src="panes.js"></script>
  <script src="script.js"></script>
</head>

<body ng-app="paneApp" ng-controller="AppCtrl">

  <div class="btn-group">
    <button type="button" class="btn btn-primary" ng-model="pane.a" btn-checkbox>A</button>
    <button type="button" class="btn btn-primary" ng-model="pane.b" btn-checkbox>B</button>
    <button type="button" class="btn btn-primary" ng-model="pane.c" btn-checkbox>C</button>
    <button type="button" class="btn btn-primary" ng-model="pane.d" btn-checkbox>D</button>
  </div> 
  
  Visible: {{pane.a}} {{pane.b}} {{pane.c}} {{pane.d}}

  <pane-container>
    <pane ng-attr-hidden="!pane.a">A</pane>
    <pane ng-attr-hidden="!pane.b">B</pane>
    <pane ng-attr-hidden="!pane.c">C</pane>
    <pane ng-attr-hidden="!pane.d">D</pane>
  </pane-container>
</body>

</html>

var app = angular.module('paneApp', ['ui.bootstrap', 'panes']);

app.controller('AppCtrl', function($scope) {
  $scope.pane = {
    a: true,
    b: true,
    c: true,
    d: true
  };
});

.pane-container {
  background: red;
}
.pane-container .pane {
  background: -moz-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%);
  background: -webkit-gradient(linear, left top, right bottom, color-stop(0%, #b5bdc8), color-stop(36%, #828c95), color-stop(100%, #28343b));
  background: -webkit-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%);
  background: -o-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%);
  background: -ms-linear-gradient(-45deg, #b5bdc8 0%, #828c95 36%, #28343b 100%);
  background: linear-gradient(135deg, #b5bdc8 0%, #828c95 36%, #28343b 100%);
  text-align: center;
  color: #fff;
  font-weight: bold;
}

 <div class="pane-container clearfix">
   Pane container: {{paneContainer.childrenCount}}
   <div ng-transclude></div>
 </div>

 <div class="pane" ng-style="style()" ng-hide="hidden">
   <div ng-transclude></div>
 </div>

angular.module('panes', [])
  .directive('paneContainer', function() {

    var controller = function($scope) {

      var visibleChildrenCount = 0;
      var children = [];

      var resizeChildren = function() {
        angular.forEach(children, function(pane, key) {
          pane.resize(1 / visibleChildrenCount);
        });
      };

      this.addPane = function(pane) {
        children.push(pane);
      };

      this.showPane = function(pane) {
        visibleChildrenCount += 1;
        resizeChildren();
      };

      this.hidePane = function(pane) {
        visibleChildrenCount -= 1;
        resizeChildren();
      };
    };

    return {
      restrict: 'E',
      transclude: true,
      templateUrl: 'pane-container.html',
      controller: controller,
      scope: {}
    };
  })
  .directive('pane', function() {

    var link = function(scope, element, attrs, PaneContainerCtrl) {
      PaneContainerCtrl.addPane(scope);
      scope.container = PaneContainerCtrl;
    };

    var controller = function($scope) {

      var width = 1;

      $scope.show = function() {
        $scope.container.showPane($scope);
      };

      $scope.hide = function() {
        $scope.container.hidePane($scope);
      };

      $scope.style = function() {
        return {
          width: (100 * width) + '%',
          float: 'left'
        };
      };

      $scope.resize = function(w) {
        width = w;
      };

      $scope.$watch('hidden', function() {
        console.log('hidden', $scope.hidden);
        if ($scope.hidden === true) {
          $scope.hide();
        } else if ($scope.hidden === false) {
          $scope.show();
        }
      });

    };

    return {
      restrict: 'E',
      link: link,
      transclude: true,
      templateUrl: 'pane.html',
      controller: controller,
      require: '^paneContainer',
      scope: {
        hidden: '=hidden'
      }
    };
  });