Dismissible Panel Directive

gistfile1.js

/*
 * This directive creates a dismissible message, which can either reappear each
 * page refresh or appear only until it is dismissed by setting a cookie.
 *
 *##### Examples
 *
 *      <div dismissible(data-title='NOTE' data-persist-dismiss >
 *         click the button to dismiss me!
 *      </div>
 *
 * @param {String} data-persist-dismiss - Optional parameter, which when set causes the panel to not reappear once dismissed
 * @param {String} data-title - Optional title
 */
angular.module('humansized.com.directives')
  .directive('dismissible', function($templateCache, $cookies, $sce) {
    'use strict';
    $templateCache.put('templates/__dismissible-container.html',
      '<div class="panel panel-info panel-dismissable">' +
        '<div class="panel-heading clearfix">' +
          '<h3 class="panel-title pull-left">{{title}}</h3>' +
          '<button type="button" class="close pull-right" ng-click="dismissPanel()" aria-hidden="true">&times;</button>' +
        '</div>' +
        '<div class="panel-body">' +
          '<div ng-bind-html="message"></div>' +
        '</div>' +
        '<div class="panel-footer clearfix">' +
          '<div class="pull-right">' +
            '<div ng-click="dismissPanel()" class="btn btn-sm btn-primary">Dismiss</button>' +
          '</div>' +
        '</div>' +
      '</div>');

    return {
      templateUrl: 'templates/__dismissible-container.html',
      restrict: 'EAC',
      scope:true,
      transclude: true,
      controller: function($scope, $element, $attrs, $transclude) {
        var id = 'dismissible_' + $element.attr('id');
        $scope.dismissPanel = function(){
          if($attrs.persistDismiss){
            $cookies[id] = (new Date()).getTime();
          }
          $element.hide();
        };

        if($cookies[id]){
          $element.hide();
        } else {
          $transclude(function(clone) {
            var html = '';
            for (var i=0; i<clone.length; i++) {
              html += clone[i].outerHTML||'';
            }
            $scope.message = $sce.trustAsHtml(html);
          });
        }
      },
      link: function($scope, element, attrs) {
        $scope.title = attrs.title || '';
        $scope.container = element;
      }
    };
  });

will be great if u change the extension to .js

Even better, if you can put it on http://plnkr.co/ with a sample. :)