Demo for isolate scope in Angular Directives

<!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 data-require="angular.js@1.2.x" src="http://code.angularjs.org/1.2.7/angular.js" data-semver="1.2.7"></script>
	<script src="script.js"></script>
</head>
<body ng-app="demoApp">
  <div ng-controller="myCtrl">
    <div id="divLeft">
      <h1>Parent scope</h1>
    	<h3>For '@' and '@attr'</h3>
    	<input type="text" ng-model="account.name"/>
    	<h3>For '=' and '=attr'</h3>
    	<input type="text" ng-model="account.mail"/>
    	<br/>
    	<h3>Can't access isolate scope of Directives</h3>
    	<h3>{{isolateScope}}</h3>
  	</div>
  	<div id="divRight">
    	<p my-demo-scope the-name={{account.name}} the-object="account" color="color" func-change-color="changeColor()"></p>
    </div>
  </div>
</body>
</html>

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

app.controller('myCtrl', ['$scope',function($scope){
  $scope.account = {
    name: 'xMen',
    mail: 'xMen@gmail.com'
  };
  $scope.colors = ['red','green','blue','yellow','pink'];
  $scope.changeColor = function(){
    return $scope.colors[Math.floor(Math.random()*5)];
  };
}]);

app.directive('myDemoScope', function () {
  return {
    scope: {
      theName:'@',
      theObject:'=',
      color:'=',
      funcChangeColor:'&'
    },
    template: "<h1>Isolate scope</h1>" +
              "<h3>Use '@' and '@attr'</h3>" +
              "<input type='text' ng-model='theName'/>" +
              "<h3>Use '=' and '=attr'</h3>" +
              "<input type='text' ng-model='theObject.mail'/>" +
              "<h3>{{isolateScope}}</h3>" +
              "<h3>Use '&' and '&attr'</h3>" +
              "<p style='background-color:{{color}}'>Hover me to change color</p>",
    link: function($scope, $element, $attrs){ 
      $scope.isolateScope = "This text is the specific property of the isolate scope";
      $el = $element.find('p');
      $el.bind('mouseover', function(){
        $scope.$apply(function(){
          $scope.color=$scope.funcChangeColor();
        });
      });
    }
  };
});

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