Demo for isolate scope in Angular Directives (scope: {})

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width" />
  <title>Angular</title>
  <link rel="stylesheet" href="style.css" />
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.7/angular.min.js"></script>
  <script src="script.js"></script>
</head>
<body ng-app="demoApp">
  <div ng-controller="myCtrl">
    <div id="divLeft">
      <h1>Parent scope</h1>
      <input type="text" ng-model="account.name" />
      <br/>
      <h3>Can't access child scope of Directives</h3>
      <h3>{{childScope}}</h3>
    </div>
    <div id="divRight">
      <p my-demo-scope></p>
    </div>
  </div>
</body>
</html>

var app = angular.module('demoApp', []);

app.controller('myCtrl', ['$scope',function($scope){
  $scope.account = {
    name: 'xMen',
    mail: 'xMen@gmail.com'
  };
}]);

app.directive('myDemoScope', function () {
  return {
    scope: {},
    template: "<h1>Isolate scope</h1>" + 
              "<input type='text' ng-model='account.name'/>" +
              "<h3>{{childScope}}</h3>",
    link: function($scope){ 
      $scope.childScope = "This text is the specific property of the child scope"
    }
  };
});

#divLeft{
  width: 45%;
  float: left;
}
#divRight{
  width: 45%;
  float: right;
  padding-left: 5%;
  border-left: 1px solid black;
}