javascript - AngularJS: element.show() in directive not working -

i have directive (see plunk) wraps div style display:none , after 1 second shows content. tried make display element.show() , $(element).show() (including jquery) never worked. timeout works, what's wrong code?

this html:

    <hideme>       show after 1 second     </hideme> 

and javascript:

angular.module("app", []);  function myctrl($scope) {}  angular.module("app").directive('hideme', function($timeout) {      return {          restrict: 'e',         template: '<div style="display: none !important"></div>',         link: function(scope, element, attrs) {              $timeout(function() {                   element.show();             }, 1000);         }    }; }); 

plunker: http://plnkr.co/edit/bzhcwjxdll3ibxc7qsmy?p=preview

try using transclude:true , ng-transclude display markup between custom element tags. also, i'm not familiar using show(), instead set html ng-show='showel' , define showel = true in timeout.

angular.module("app", []);  function myctrl($scope) {}  angular.module("app").directive('hideme', function($timeout) {      return {           transclude: true,         restrict: 'e',         template: '<div ng-show="showel"><div ng-transclude></div></div>',         link: function(scope, element, attrs) {              $timeout(function() {                   scope.showel = true;               }, 1000);         }     }; });