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

​

myApp.directive('searchBox', function($timeout) {

  return {

    restrict: 'A',

    template: '<div class="search-box" ng-class="{open: open}">'+

    '<form class="search-form">'+

      '<input type="text" class="form-control search-input" ng-blur="hideInput()">'+

    '</form>'+

    '<button type="button" class="btn search-btn" ng-click="showInput()">Search</button>'+

    '</div>',

    replace: true,

    scope: {},

    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;

      };

    }

  };

});