Edit in JSFiddle

angular.module('app', []);
  
angular.module('app')
  .directive('orePanel', function() {
    return {
      restrict: 'E',
      scope: { 'data': '='},
      template: [
        '<div class="panel panel-info">',
        ' <div class="panel-heading">',
        '  {{data.title}}',
        ' </div>',
        ' <div class="panel-body">',
        '  {{data.text}}',
        ' </div>' ,
        '</div>'
      ].join('')
    };
  });      

angular.module('app')
  .controller('MainCtrl', function($scope) {
      $scope.panel = {
          title: "たいとる〜",
          text:"めっせーじてきすと"
      };
  });

<div ng-app="app" class="app-contents" >
  <div ng-controller="MainCtrl">
    
    <!-- restrict: 'E' -->
    <ore-panel data="panel" ></ore-panel>
    
  </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;
}

External resources loaded into this fiddle: