Angular's Directive scope values

check this out for the understanding of the different scope parameters of angular js directives

HTML

<div ng-controller = "parentCtrl" >
Controller direct
<div ng-bind = "name"> </div> <br/>
1. default scope
  <div default-scope>

  </div><br/>
 2.own scope
  <div own-scope>

  </div><br/>
   3.isolated scope
  <div isolated-scope>

  </div><br/>
  
   3.1 isolated scope with =
  <div isolated-scope-with-equals  name=name> <!-- Notice how the object has been passed-->

  </div><br/>
  
    3.2 isolated scope with @
  <div isolated-scope-with@  name="{{name}}"> <!-- Notice how the value has been passed-->

  </div><br/>
  
  
    3.3 isolated scope with &
  <div isolated-scope-with-amp  name="controllerMethod(msg)"> <!-- Notice how the value has been passed-->

  </div><br/>
  
  
</div>

JavaScript

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

app.controller('parentCtrl',function ($scope) {
	$scope.name = "rishul"; //this has been defined in parent
  $scope.controllerMethod = function (msg) {
  	alert("i am in parent! " + msg)
  }
});

app.directive('defaultScope' , function () {
	return {
  	restrict : 'A',
  	template: '<div ng-bind = "name"></div>',  //accessing parents prop
  	link : function (scope,element,attr) {
    	
    }
  };
});

app.directive('ownScope' , function () {
	return {
  	restrict : 'A',
    scope:true,
  	template: '<div ng-bind = "name"></div>',  //accessing parents prop
  	link : function (scope,element,attr) {
    	
    }
  };
});


app.directive('isolatedScope' , function () {
	return {
  	restrict : 'A',
    scope:{},
  	template: '<div ng-bind = "name"></div> Explanation: not working as it cannot access the property name',  //accessing parents prop doesnt work isolated scope
  	link : function (scope,element,attr) {
    	
    }
  };
});

app.directive('isolatedScopeWithEquals' , function ($timeout,$interval) {
	return {
  	restrict : 'A',
    scope:{'name':'='},
  	template: '<div ng-bind = "name"></div> <br/> <div> Explanation : the equals directive will change its name property to "matta"  after 10 seconds, which is 2 way binded with controllers name prop , so all the upper properties and of the @ below will change too!  <span ng-bind = "time" style = "color:red;font-size:28px" ng-hide = "show"></span> <div ng-show = "show"> KAZAAAM! </div></div>',  //accessing parents prop  works  as it is 2 way data binding
  	link : function (scope,element,attr) {
    	//now lets change the value from directive to see the controller thing changing
      scope.time = 10;
      scope.show = false; // to show kazaam prop
      var interval = $interval(function() {
      	scope.time--;  // to show the timer!
      },1000)
      
      $timeout(function() {
				scope.name = "matta";  //change occured
         $interval.cancel(interval);
        ...