Isolated scope for directives

I'm having some troubles understanding isolated scopes in Angular directives. I've read the official documentation, watched a lot of videos about the subject, so now I'm know what's the purpose of them, but I'm not sure how to use them.

Here is a simple example.
I created a directive called searchBox (see full source and demo)

var myApp = angular.module('myApp', []); myApp.directive('searchBox', function($timeout) { return { restrict: 'A', scope: true, link: function(scope, element) { scope.open = false; // Show search input scope.showInput = function() { scope.open = true; // Focus the input $timeout(function() { element.find('input').focus(); }, 0); }; // Hide search input scope.hideInput = function() { scope.open = false; }; } } }); 

and this actually works as expected. However, I want to isolate the scope of the directive, but if I change scope: true to scope: {} (see full source and demo)) it no longer works, but I can't see any errors in the console.

I'm sure it's something elementary I'm doing wrong, but I really hope somebody can open my eyes and help me understand this.