<!DOCTYPE html>
<html>

  <head>
    <link data-require="bootstrap-css@*" data-semver="3.2.0" rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css" />
    <script data-require="angular.js@*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-app="aModule">
  
    <h1>A Simple Example (Broken)</h1>
    
    <input
      type       ="text"
      placeholder="something"
      ng-model   ="something"
      class      ="form-control"
    />
    
    <div a-directive>
  		something: {{ something }}<em ng-if="! something">[nothing]</em>
  	</div>
  	
  </body>

</html>
angular.module( 'aModule', [ 'ng' ] )
.directive( 'aDirective', function() {
	return {
		transclude : true,
		templateUrl: 'a-directive.html',
		scope      : {} // <- this is all that's changed
	};
} )
.directive( 'anotherDirective', function() {
  return {
    transclude : true,
    templateUrl: 'another-directive.html',
    scope      : true
  };
});
/* Styles go here */

<div class="well">

  In a directive (<span ng-transclude></span>)
  
  <div another-directive>
    <span ng-transclude></span>
  </div>
  
</div>
<div class="well">
  In another directive (<span ng-transclude></span>)
</div>