Edit on
<div ng-app='app'>
  <div ng-controller="MainController">
    <div>
      <h4>No scope</h4>
      <d1 ng-model='hello'></d1>
    </div>
    <div>
      <h4>Inherited scope</h4>
      <d2 ng-model='hello'></d2>
    </div>
    <div>
      <h4>Isolated scope</h4>
      <d3 ng-model='hello'></d3>
    </div>
    <div>
      <h4>Isolated scope, use @</h4>
      <d4 ng-model='hello'></d4>
    </div>
  </div>
</div>
var app = angular.module('app', []);

app.controller('MainController', ['$scope', function($scope) {
  $scope.hello = 'World';
}]);

// No scope
app.directive('d1', function() {
  return {
    restrict: 'E',
    link: function($scope, $element, $attr) {
      angular.element($element).append("Hello ");
      angular.element($element).append($scope[$attr.ngModel]);
    }
  };
});

// Inherited scope
app.directive('d2', function() {
  return {
    restrict: 'E',
    scope: true,
    link: function($scope, $element, $attr) {
      angular.element($element).append("Hello ");
      angular.element($element).append($scope[$attr.ngModel]);
    }
  };
});

// Isolated scope
app.directive('d3', function() {
  return {
    restrict: 'E',
    scope: {
      modelValue: '=ngModel'
    },
    link: function($scope, $element, $attr) {
      angular.element($element).append("Hello ");
      angular.element($element).append($scope.modelValue);
    }
  };
});

// Isolated scope, use @
app.directive('d4', function() {
  return {
    restrict: 'E',
    scope: {
      modelValue: '@ngModel'
    },
    link: function($scope, $element, $attr) {
      angular.element($element).append("Hello ");
      angular.element($element).append($scope.modelValue);
    }
  };
});
Rerun