mreis1/index.html

## index.html
<!doctype html>
<html ng-app="myApp">
  <head>
<meta name="description" content="Creating components: Directives that communicate" />
    <script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

<style id="jsbin-css">
body{
  font-family:'Helvetica';
  line-height: 1.5em;
  padding:20px;
}
input{
  border: 1px solid #ddd;
  padding: 6px 15px;
}
.red{
  color:red;
}
.block{
  display:block;
}

li.active,
li.active a{
  color:red;
}
</style>
</head>
  <script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
  <body>
  <my-tabs>
  <my-pane title="Hello">
    <h4>Hello</h4>
    <p>Lorem ipsum dolor sit amet</p>
  </my-pane>
  <my-pane title="World">
    <h4>World</h4>
    <em>Mauris elementum elementum enim at suscipit.</em>
    <p><a href ng-click="i = i + 1">counter: {{i || 0}}</a></p>
  </my-pane>
</my-tabs>

    <script id="tmpl-my-tabs" type="text/ng-template">
      <div class="tabbable">
  <ul class="nav nav-tabs">
    <li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
      <a href="" ng-click="select(pane)">{{pane.title}}</a>
    </li>
  </ul>
  <div class="tab-content" ng-transclude></div>
</div>
    </script>

    <script id="tmpl-my-pane" type="text/ng-template">
<div class="tab-pane" ng-show="selected" ng-transclude>
</div>
    </script>

  <script id="jsbin-javascript">
angular.module('myApp',[])
.directive('myTabs',function(){
   return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'tmpl-my-tabs'
  }
})
.directive('myPane',function(){
  return {
    require: '^myTabs',
    'restrict':'E',
    transclude:true,
    scope: {
      title: '@'
    },
    link: function(scope, el, attrs, myTabsCtrl){
      myTabsCtrl.addPane(scope);
    },
    templateUrl: 'tmpl-my-pane'
  }
})
</script>


<script id="jsbin-source-css" type="text/css">body{
  font-family:'Helvetica';
  line-height: 1.5em;
  padding:20px;
}
input{
  border: 1px solid #ddd;
  padding: 6px 15px;
}
.red{
  color:red;
}
.block{
  display:block;
}

li.active,
li.active a{
  color:red;
}</script>

<script id="jsbin-source-javascript" type="text/javascript">angular.module('myApp',[])
.directive('myTabs',function(){
   return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'tmpl-my-tabs'
  }
})
.directive('myPane',function(){
  return {
    require: '^myTabs',
    'restrict':'E',
    transclude:true,
    scope: {
      title: '@'
    },
    link: function(scope, el, attrs, myTabsCtrl){
      myTabsCtrl.addPane(scope);
    },
    templateUrl: 'tmpl-my-pane'
  }
})
</script></body>
</html>

## jsbin.zikuvo.css
body{
  font-family:'Helvetica';
  line-height: 1.5em;
  padding:20px;
}
input{
  border: 1px solid #ddd;
  padding: 6px 15px;
}
.red{
  color:red;
}
.block{
  display:block;
}

li.active,
li.active a{
  color:red;
}

## jsbin.zikuvo.js
angular.module('myApp',[])
.directive('myTabs',function(){
   return {
    restrict: 'E',
    transclude: true,
    scope: {},
    controller: function($scope) {
      var panes = $scope.panes = [];

      $scope.select = function(pane) {
        angular.forEach(panes, function(pane) {
          pane.selected = false;
        });
        pane.selected = true;
      };

      this.addPane = function(pane) {
        if (panes.length === 0) {
          $scope.select(pane);
        }
        panes.push(pane);
      };
    },
    templateUrl: 'tmpl-my-tabs'
  }
})
.directive('myPane',function(){
  return {
    require: '^myTabs',
    'restrict':'E',
    transclude:true,
    scope: {
      title: '@'
    },
    link: function(scope, el, attrs, myTabsCtrl){
      myTabsCtrl.addPane(scope);
    },
    templateUrl: 'tmpl-my-pane'
  }
})
	<!doctype html>
	<html ng-app="myApp">
	<head>
	<meta name="description" content="Creating components: Directives that communicate" />
	<script src="http://code.jquery.com/jquery-2.1.0.min.js"></script>
	<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0/angular.min.js"></script>

	<style id="jsbin-css">
	body{
	font-family:'Helvetica';
	line-height: 1.5em;
	padding:20px;
	}
	input{
	border: 1px solid #ddd;
	padding: 6px 15px;
	}
	.red{
	color:red;
	}
	.block{
	display:block;
	}

	li.active,
	li.active a{
	color:red;
	}
	</style>
	</head>
	<script src="http://angular-ui.github.io/ui-router/release/angular-ui-router.min.js"></script>
	<body>
	<my-tabs>
	<my-pane title="Hello">
	<h4>Hello</h4>
	<p>Lorem ipsum dolor sit amet</p>
	</my-pane>
	<my-pane title="World">
	<h4>World</h4>
	<em>Mauris elementum elementum enim at suscipit.</em>
	<p><a href ng-click="i = i + 1">counter: {{i \|\| 0}}</a></p>
	</my-pane>
	</my-tabs>

	<script id="tmpl-my-tabs" type="text/ng-template">
	<div class="tabbable">
	<ul class="nav nav-tabs">
	<li ng-repeat="pane in panes" ng-class="{active:pane.selected}">
	<a href="" ng-click="select(pane)">{{pane.title}}</a>
	</li>
	</ul>
	<div class="tab-content" ng-transclude></div>
	</div>
	</script>

	<script id="tmpl-my-pane" type="text/ng-template">
	<div class="tab-pane" ng-show="selected" ng-transclude>
	</div>
	</script>

	<script id="jsbin-javascript">
	angular.module('myApp',[])
	.directive('myTabs',function(){
	return {
	restrict: 'E',
	transclude: true,
	scope: {},
	controller: function($scope) {
	var panes = $scope.panes = [];

	$scope.select = function(pane) {
	angular.forEach(panes, function(pane) {
	pane.selected = false;
	});
	pane.selected = true;
	};

	this.addPane = function(pane) {
	if (panes.length === 0) {
	$scope.select(pane);
	}
	panes.push(pane);
	};
	},
	templateUrl: 'tmpl-my-tabs'
	}
	})
	.directive('myPane',function(){
	return {
	require: '^myTabs',
	'restrict':'E',
	transclude:true,
	scope: {
	title: '@'
	},
	link: function(scope, el, attrs, myTabsCtrl){
	myTabsCtrl.addPane(scope);
	},
	templateUrl: 'tmpl-my-pane'
	}
	})
	</script>


	<script id="jsbin-source-css" type="text/css">body{
	font-family:'Helvetica';
	line-height: 1.5em;
	padding:20px;
	}
	input{
	border: 1px solid #ddd;
	padding: 6px 15px;
	}
	.red{
	color:red;
	}
	.block{
	display:block;
	}

	li.active,
	li.active a{
	color:red;
	}</script>

	<script id="jsbin-source-javascript" type="text/javascript">angular.module('myApp',[])
	.directive('myTabs',function(){
	return {
	restrict: 'E',
	transclude: true,
	scope: {},
	controller: function($scope) {
	var panes = $scope.panes = [];

	$scope.select = function(pane) {
	angular.forEach(panes, function(pane) {
	pane.selected = false;
	});
	pane.selected = true;
	};

	this.addPane = function(pane) {
	if (panes.length === 0) {
	$scope.select(pane);
	}
	panes.push(pane);
	};
	},
	templateUrl: 'tmpl-my-tabs'
	}
	})
	.directive('myPane',function(){
	return {
	require: '^myTabs',
	'restrict':'E',
	transclude:true,
	scope: {
	title: '@'
	},
	link: function(scope, el, attrs, myTabsCtrl){
	myTabsCtrl.addPane(scope);
	},
	templateUrl: 'tmpl-my-pane'
	}
	})
	</script></body>
	</html>