Simple angular template

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

  <head>
    <link data-require="bootstrap@3.3.6" data-semver="3.3.6" rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
    <script data-require="jquery@2.2.4" data-semver="2.2.4" src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
    <script data-require="angularjs@1.6.4" data-semver="1.6.4" src="https://code.angularjs.org/1.6.4/angular.min.js"></script>
    <script data-require="bootstrap.js@3.3.6" data-semver="3.3.6" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="mainCtrl" class="container" style="padding-top:30px">
    <h1>Hello Plunker!</h1>
    <user-info-card user="user1">
      <knight-me></knight-me>
    </user-info-card>
    <user-info-card user="user2">
            <knight-me-extended></knight-me-extended>
    </user-info-card>
  </body>

</html>

// Code goes here

angular.module('app', [])

angular.module('app').controller('mainCtrl', function($scope) {
  $scope.user1 = {
    name: 'Luke Skywalker',
    adress: {
      street: 'Rafet Canitez Cad.',
      city: 'Ankara',
      planet: 'Earth'
    },
    friends: [
      'Han',
      'Leia',
      'Chewbacca'
    ]
  };

  $scope.user2 = {
    name: 'Han Solo',
    adress: {
      street: 'Baglar Cad.',
      city: 'Ankara',
      planet: 'Earth'
    },
    friends: [
      'Luke',
      'Leia',
      'Chewbacca'
    ]
  };
});

angular.module('app').directive('userInfoCard', function() {

  return {
    templateUrl: 'UserInfoCard.html',
    restrict: 'E',
    replace: true,
    transclude: true,
    scope: {
      user: "="
    },
    controller: function($scope) {

      $scope.collapsed = true;
      $scope.collapse = collapse;
      $scope.knightMe = knightMe;
      $scope.removeFriend = removeFriend;
      
      this.user = $scope.user;
      this.knightMe = $scope.knightMe;
      this.collapse = $scope.collapse;

      function knightMe(user) {
        user.rank = "Knight:\t" + user.name;
      }

      function collapse() {
        $scope.collapsed = !$scope.collapsed
      }

      function removeFriend(friend) {
        var idx = $scope.user.friends.indexOf(friend);
        if (idx > -1) {
          $scope.user.friends.splice(idx, 1);
        }
      }
    }
  }

});

angular.module('app').directive('knightMe', function() {

  return {
    templateUrl: 'KnightMe.html',
    restrict: 'E',
    require: '^userInfoCard',
    link: function(scope, element, attrs, parentCtrl) {
      scope.knightMe = parentCtrl.knightMe;
      scope.user = parentCtrl.user;
    }
    
  }
});

angular.module('app').directive('knightMeExtended', function() {

  return {
    templateUrl: 'KnightMeExtended.html',
    restrict: 'E',
    require: '^userInfoCard',
    link: function(scope, element, attrs, parentCtrl) {
      scope.knightMe = parentCtrl.knightMe;
      scope.user = parentCtrl.user;
      scope.collapse = parentCtrl.collapse;
    },
    controller: function($scope){
      $scope.logUserName = logUserName;
      
      function logUserName(user){
        console.log(user.name);
        // $scope.collapse();
      }
    }
    
  }
});

angular.module('app').directive('removeFriend', function() {

  return {
    restrict: 'E',
    templateUrl: 'RemoveFriend.html',
    scope: {
      notifyParent: '&method'
    },
    controller: function($scope) {

      $scope.removing = false;
      $scope.startRemoving = startRemoving;
      $scope.cancelRemove = cancelRemove;
      $scope.confirmRemove = confirmRemove;

      function startRemoving() {
        $scope.removing = true;
      }

      function cancelRemove() {
        $scope.removing = false;
      }

      function confirmRemove() {
        $scope.notifyParent();
      }

    }
  }

});


angular.module('app').directive('address', function() {

  return {
    templateUrl: 'Address.html',
    restrict: 'E',
    scope: true,
    controller: function($scope) {

      $scope.collapsed = true;
      $scope.collapseAddress = collapseAddress;
      $scope.expandAddress = expandAddress;

      function collapseAddress() {
        $scope.collapsed = true;
      }

      function expandAddress() {
        $scope.collapsed = false;
      }
    }
  }
});

/* Styles go here */

<div class='panel panel-primary'>
  <div class='panel-heading' ng-click='collapse()'>
    {{user.name}}
  </div>

  <div class='panel-body' ng-hide='collapsed'>
    <address></address>

    <h4>Friends: </h4>
    <ul>
      <li ng-repeat='friend in user.friends'>
        {{friend}}
        <remove-friend method='removeFriend(friend)'></remove-friend>
      </li>
    </ul>
    <br>
    <div ng-transclude></div>
  </div>
</div>

<div ng-show='!!user.adress  && !collapsed' ng-click='collapseAddress()'>
  <h4>Address:</h4> {{user.adress.street}}
  <br> {{user.adress.city}}
  <br> {{user.adress.planet}}
  <br>
</div>

<div ng-show='!!user.adress && collapsed' ng-click='expandAddress()'>
  <h4>Address:</h4> {{user.adress.street}}...
  
</div>
<br />

<span class='glyphicon glyphicon-remove' style='cursor:pointer' ng-show='!removing' ng-click='startRemoving()'></span>
<span ng-show='removing'>
  <button class='btn btn-xs button-success' ng-click='confirmRemove()'>Remove</button>
  <button class='btn btn-xs button-danger' ng-click='cancelRemove()'>Cancel</button>
</span>

<div ng-show='!!user.rank'>
  <h4>Rank:</h4> {{ user.rank }}
</div>
<button ng-show='!user.rank' class='btn btn-success' ng-click='knightMe(user)'>Knight me</button>

<div ng-show='!!user.rank'>
  <h4>Rank:</h4> {{ user.rank }}
</div>
<button ng-show='!user.rank' class='btn btn-success' ng-click='knightMe(user)'>Knight me</button>
<button ng-show='!user.rank' class='btn btn-info' ng-click='logUserName(user)'>Extended</button>