Types of isolate scope

<!DOCTYPE html>
<html ng-app="isolate-scope">

  <head>
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/normalize.css" />
    <link data-require="foundation@*" data-semver="5.0.0" rel="stylesheet" href="//cdn.jsdelivr.net/foundation/5.0.0/css/foundation.min.css" />
    <script data-require="jquery@*" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@*" data-semver="1.2.9" src="http://code.angularjs.org/1.2.9/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="Ctrl">
    <header>
      <h1>Outer Scope</h1>
      <label>Two Way:</label> <input type="text" ng-model="twoWayCtrl" />
      <label>One Way:</label> <input type="text" ng-model="oneWayCtrl" />
    </header>
    
    <section isolated two-way="twoWayCtrl" one-way="{{oneWayCtrl}}" method="methodCtrl(message)"></section>
  </body>

</html>

angular.module('isolate-scope', []).

controller('Ctrl', function($scope){
  $scope.twoWayCtrl = "This is the value for two-way databinding";
  $scope.oneWayCtrl = "This is the value for one-way databinding";
  
  $scope.methodCtrl = function(message){
    alert('this is the message: '+ message);
  }
}).

directive('isolated', function(){
  return {
    restrict: 'A',
    scope: {
      twoWay: '=',
      oneWay: '@',
      method: '&'
    },
    
    templateUrl: 'isolated.html'
  }
});

header {
  background-color: #EEE;
  padding: 10px 20px;
}

[isolated] {
  padding: 10px 20px;
}

<h1>Isolated</h1>

<label>Two Way</label><input type='text' ng-model='twoWay'/>
<label>One Way</label><input type='text' ng-model='oneWay'/> 
<label>Method</label><input type='text' ng-model='isolatedMessage' placeholder='message' />
<button type='button' class='small' ng-click="method({message: isolatedMessage})">Invoke Method</button>