AngularJS directives: link function and scope isolation &

An example to use the link function and the scope isolation "&" inside a directive

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.4/angular.min.js"></script>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script>
 angular.module('isolateScope', [])
 .directive("isolateDirective", function () {
 return {
 replace : true,
 template: '<button>{{isolates}}</button>',
 scope : {
 isolates : '=',
 },
 link : function($scope, $element, $attr) {
 $scope.isolates.ibm = "IBM";
 }
 };
 })
 .controller("ctrl", function ($scope) {
 $scope.btns = {
 ibm : 'ibm',
 dw : 'DeveloperWorks'
 }; 
 });
</script>
<body data-ng-app="isolateScope" >
 <div data-ng-controller="ctrl">
 <button>{{btns.dw}}</button>
 <button>{{btns.ibm}}</button>
 <div data-isolate-directive data-isolates="btns"></div>
 </div>
</body>

CSS

li, .pointer { cursor: pointer; }