angular example

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
<div id="content" style="margin: 20px">
    <parent>
            <child id="1" selected-index="selectedIndex"></child>
            <child id="2" selected-index="selectedIndex"></child>
    </parent>
</div>
<script type="text/ng-template" id="partials/parent.html">
<div>
  	<h1>Parent Directive selected index : {{ selectedIndex }}</h1>
    <div id="children" ng-transclude></div>
</div>
</script>
<script type="text/ng-template" id="partials/child.html">
<div ng-show="id==selectedIndex">
    <h1>{{id}}</h1>
</div>
</script>

JavaScript

angular.module('testStep', [])
    .controller('parentController', ['$scope', function ($scope) {
      $scope.selectedIndex = 2;
    }])
    .directive('parent', function () {
      return {
        restrict: 'EA',
        transclude: true,
        controller: 'parentController',
        templateUrl: 'partials/parent.html',
      };
		})
  .directive('child', [function () {
      return {
          restrict: 'EA', // TODO: see above
          replace: true,
          templateUrl: 'partials/child.html',
          transclude: true,
          scope: {
            id: '@',
            selectedIndex: '='
          }
      };
  }]);