Use $timeout inside custom AngularJS directive
<p>I want to use $timeout inside my custom AngularJS directive, but it's not working. My last implementation looks as following:</p>

<pre><code>var App = angular.module('App', []);

App.controller('Controller', function($scope){
    $scope.test = true;
    $scope.toggle = function(){ $scope.test = !$scope.test;};
});

App.directive('showTemporary', ['$timeout', function ($timeout) {
    return {
        restrict: 'A',
        link: function(scope, element, attr){
                scope.$watch(attr.showTemporary, function(value){
                element.css('display', value ? '' : 'none');
            });
            $timeout(element.css('display', 'none'), attr.hideDelay);
        }
    }
}]);
</code></pre>

<p>And markup:</p>

<pre><code>&lt;div ng-app='App'&gt;
    &lt;div ng-controller='Controller'&gt;
        &lt;button ng-click='toggle()'&gt;toggle&lt;/button&gt;
        &lt;div show-temporary='test' hide-delay="5000"&gt; visible&lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;
</code></pre>