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

​

app.controller('MainCtrl', function ($scope) {

});

​

​

app.directive('myModal', ['$rootScope', function ($rootScope) {

  return {

    restric: 'A',

    replace: true,

    template: '<div class="modal" ng-show="modal.show">{{ modal.mainMessage }}<br /><button ng-click="modal.toggle()">Close</button></div>',

    link: function (scope, elm, attrs) {

      $rootScope.modal= {

        mainMessage: '',

        subMessage: '',

        show: false,

        toggle: function (mainMessage, submessage) {

           this.mainMessage = mainMessage;

           this.submessage = submessage;

           this.show = !this.show;

        }

      };

    }

  };

}]);