Edit in JSFiddle

angular.module('app', []);
  
angular.module('app')
  .directive('orePanel', function() {
    return {
      restrict: 'EAC',
      template: [
        '<div class="panel panel-info">',
        ' <div class="panel-heading">',
        '  たいとる',
        ' </div>',
        ' <div class="panel-body">',
        '  めんばー',
        ' </div>' ,
        '</div>'
      ].join('')
    };
  });      

angular.module('app')
  .controller('MainCtrl', function($scope) {
  });

<div ng-app="app" class="app-contents" >
  <div ng-controller="MainCtrl">
    
    <!-- restrict: 'E' -->
    <ore-panel ></ore-panel>
    
    <!-- restrict: 'A' -->
    <div ore-panel="" ></div>
      
    <!-- restrict: 'C' -->
    <div class="ore-panel" ></div>
      
  </div>
</div>




<!-- AngularJS -->
<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.7/angular.min.js" ></script>

.app-contents {
    margin: 8px;
    padding: 8px;
}