AngularJS 1.2.x

var app = angular.module('plunker', []);
app.controller('MainCtrl', function ($scope, $interval) {
  $scope.isLoading = false;
  
  $interval(function () {
    $scope.isLoading = !$scope.isLoading;
  }, 1000)
});

app.directive('component', function () {
    return {
        restrict : 'A',
        transclude : true,
        replace : true,
        templateUrl : 'component.html',
        scope : {
            title : '@',
            loadingVisible : '@'
        },
        link : function (scope, elem, attrs) {
          console.log(elem.find('#a'));
          
          if (!scope.title) {
            throw 'must specify a title!';
          }
          if (!attrs.loadingVisible) {
              scope.loadingVisible = false;
          }
        }
    };
});

<!DOCTYPE html>
<html ng-app="plunker">

  <head>
    <meta charset="utf-8" />
    <title>AngularJS Plunker</title>
    <script>document.write('<base href="' + document.location + '" />');</script>
    <link rel="stylesheet" href="style.css" />
    <script data-require="jquery" data-semver="2.0.3" src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
    <script data-require="angular.js@1.2.x" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.min.js" data-semver="1.2.16"></script>
    <script src="app.js"></script>
  </head>

  <body ng-controller="MainCtrl">
    
    <div component title="test title" loading-visible="{{isLoading}}">
      <div id="a">AAA</div>
    </div>
  </body>

</html>

/* Put your css in here */

<div class="panel panel-default">
  <div class="panel-heading">{{title}}</div>
  <div class="panel-body">
      <p ng-show="loadingVisible" class="text-center">Loading...</p>
  
      <div ng-hide="loadingVisible" ng-transclude></div>
  </div>
</div>