AngularJS 1.2.x

angular.module('demo', [])
  .controller('myCtrl', function($scope) {
    $scope.ctrl = 'ctrl';
  })
  .directive('isolatedDir', function() {
    return {
      'scope': {},
      'link': function($scope) {
        $scope.dir = 'dir';
      }
    }
  })
  .directive('nonIsolatedDir', function() {
    return {
      'link': function($scope) {
        $scope.dir = 'dir';
      }
    }
  });

<!DOCTYPE html>
<html ng-app="demo">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.17/angular.min.js" data-semver="1.2.17"></script>
    <script src="app.js"></script>
  </head>

  <div ng-controller="myCtrl">
		<div isolated-dir>
		<p>Isolated:</p>
			<p>{{ctrl}}</p>
			<p>{{dir}}</p>
		</div>
	</div>
	
	<div ng-controller="myCtrl">
		<div non-isolated-dir>
		<p>Non-isolated:</p>
			<p>{{ctrl}}</p>
			<p>{{dir}}</p>
		</div>
	</div>

</html>

/* Put your css in here */