Edit in JSFiddle

var app = angular.module("myApp", []);

app.controller("SampleCtrl", ['$scope', function ($scope) {
    $scope.val = 0;
}]);

app.directive("dirWithoutScope", function () {
    return{
        scope:false,
        link: function (scope, elem, attrs, ctrl) {
            scope.val=20;
        }
    }
});

app.directive("dirWithScopeTrue", function () {
    return{
        scope:true,
        link: function (scope, elem, attrs, ctrl) {
            scope.val=25;
        }
    }
});

app.directive("dirWithNewScope", function(){
    return{
        scope:{
        },
        link:function(scope, elem, attrs, ctrl){
            scope.val=30;
        }
    }
});

<div ng-app="myApp">
    <div data-ng-controller="SampleCtrl">
        Span with no directive: <span>{{val}}</span>
        <br />
        <br />
        Directive with no child scope: <span dir-without-scope>{{val}}</span>
        <br />
        <br />
        Directive with scope set to true: <span dir-with-scope-true>{{val}}</span>
        <br />
        <br />
        Directive with isolated scope: <span dir-with-new-scope>{{val}}</span>
        <br />
        <br />
        Directive with isolated scope displaying parent&apos;s value: <span dir-with-new-scope>{{$parent.val}}</span>
    </div>
</div>