angularjs - How to show and hide element in my case -

i trying create directive modal can use on other place.

i want modal pop when user something. use ng-show hide it.

my html

 <my-modal ng-show="showmodal" data-text="my text"></my-modal> 

my directive

angular.module('myapp').directive('mymodal', ['$modal',     function($modal) {         return {             restrict: 'e',             scope: false,             link: function(scope, elem, attrs) {                               $modal({                     template: '<div>{{scope.attrs.text}}</div>'                     scope: scope,                 });             }         };     } ]); 

my controller

angular.module('myapp').controller('tctrl', ['$scope',     function($scope) {         $scope.showmodal = false;     } }])  

for reason, can't hide modal , pops when page first loads. how hide when page first loads? help!

the link function runs directive loaded, in case, if want show modal once $scope.showmodal = true, have modify directive:

angular.module('myapp').directive('mymodal', ['$modal',     function($modal) {         return {             restrict: 'e',             scope: {               display: '=',             },             link: function(scope, elem, attrs) {                            scope.$watch('display', function(newval, oldval) {                 if(newval !== oldval && newval) {                   $modal({                       template: '<div>{{scope.attrs.text}}</div>',                       scope: scope                   });                 }               });             }         };     } ]); 

and change html

<my-modal display="showmodal" data-text="my text"></my-modal>