transclusion example II

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

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

  <body ng-controller="mainCtrl" class="container" style="padding-top:50px;">
    <display-info user="user" infocard="true"></display-info>
    <display-info user="DCUser" infocard="true"></display-info>
    <transformer-info transformer="transformer" infocard="true"></transformer-info>
  </body>

</html>

angular.module('myApp', []);
angular.module('myApp').controller('mainCtrl', function($scope) {
  $scope.user = {
    name: 'Ironman',
    group: 'Avengers',
    address: {
      street: '10880, Malibu Point',
      city: 'Malibu, Calif',
      country: 'United States',
    },
    teamAffiliation: [
      'Avengers', 'S.H.I.E.L.D', 'Stark Industries', 'Guardians of galaxy'
    ],
    message:'Avengers are at civil war!',
    level: 0
  }
  //$scope.style="textStyle";

  $scope.DCUser = {
    name: 'Batman',
    group: 'Justice League',
    address: {
      street: '1007 Mountain Drive',
      city: 'gotham',
      country: 'United States',
    },
    teamAffiliation: [
      'Justice League', 'Batman Family', 'Wayne Enterprise', 'Outsiders'
    ],
    message:'Joker has blocked the way!',
    level: 0
  }
  
  $scope.transformer = {
    name: 'Optimus Prime',
    group: 'Autobot',
    role: 'Autobot leader',
    partners: ['Roller', 'Hi-Q'],
    message:'will arrive soon buddy!',
    level: 0
  }
});

angular.module('myApp').directive('userPanel', function() {
  return {
    templateUrl: 'userPanel.html',
    restrict: 'E',
    scope: {
      group:'@',
      name:'@',
      showInfo:'@infocard',
      level:'=',
      message:'@'
    },
    controller: function($scope) {
      $scope.infocard = ($scope.showInfo === 'true');
      $scope.callAvengers = function() {
        $scope.infocard = !$scope.infocard;
      };
    },
    transclude: true
  }
});

angular.module('myApp').directive('displayInfo', function() {
  return {
    templateUrl: "displayInfo.html",
    restrict: "EA",
    scope: {
      user: '=',
      showInfo: '@infocard'
    },
    controller: function($scope) {
      
      $scope.remove = function(team) {
        var index = $scope.user.teamAffiliation.indexOf(team);
        $scope.user.teamAffiliation.splice(index, 1);
      };
    
      $scope.state = function(user) {
        user.level++;
        user.level = user.level % 2;
      };
    }
  }
});

angular.module('myApp').directive('transformerInfo', function() {
  return {
    templateUrl: "transformerInfo.html",
    restrict: "EA",
    scope: {
      transformer: '=',
      showInfo: '@infocard'
    },
    controller: function($scope) {
      
      $scope.remove = function(partner) {
        var index = $scope.transformer.partners.indexOf(partner);
        $scope.transformer.partners.splice(index, 1);
      };
      $scope.state = function(transformer) {
        transformer.level++;
        transformer.level = transformer.level % 2;
      };
    }
  }
});

angular.module('myApp').directive('removeTeam', function() {
  return {
    templateUrl: "removeTeam.html",
    restrict: "EA",
    scope: {
      notifyRemove: '&method1',
      notifyState: '&method2'
    },
    controller: function($scope) {
      $scope.warningState = false;
      
      $scope.isRemove = function() {
        $scope.warningState = true;
        $scope.removing = true;
      };
      
      $scope.cancelRemove = function() {
        $scope.warningState = false
        $scope.removing = false;
      }
      
      $scope.confirmRemove = function() {
        $scope.warningState = false;
        $scope.notifyRemove();
      };
      
      $scope.changeState = function() {
        $scope.notifyState();
      }
    }
  }
});
angular.module('myApp').directive('displayState', function() {
  return {
    link: function(scope, el, attrs) {
      scope.$watch(attrs['displayState'], function(value) {
        switch (value) {
          case 0:
            el.css('background-color', 'white');
            break;
          case 1:
            el.css('background-color', 'yellow');
            break;
        }
      });
    }
  }
});

/* Styles go here */
.textStyle {
  color : #3399ff;
  font-style : italic;
  font-weight : bold;
}

<user-panel group="{{user.group}}" name="{{user.name}}" infocard="{{showInfo}}" message="{{user.message}}" level="user.level">
  <div>
    <h4>Address:</h4> Street: {{user.address.street}}
    <br /> City: {{user.address.city}}
    <br /> Country: {{user.address.country}}
  </div>
  <br /> Team Affiliation:
  <ul>
    <li ng-repeat="team in user.teamAffiliation">
      {{team}}
      <remove-team method1="remove(team);" method2="state(user);"></remove-team>
    </li>
  </ul>
</user-panel>

<span class="glyphicon glyphicon-remove" ng-hide="warningState" ng-click="isRemove();changeState();"></span>
<span ng-show="removing">
  <button class="btn btn-xs btn-success" ng-click="confirmRemove();changeState();">confirm</button>
  <button class="btn btn-xs btn-danger" ng-click="cancelRemove();changeState();">cancel</button>
</span>

<user-panel group="{{transformer.group}}" name="{{transformer.name}}" infocard="{{showInfo}}" message="{{transformer.message}}" level="transformer.level">
  <br />
  <div>
    Partners:
    <ul>
      <li ng-repeat="partner in transformer.partners">
        {{partner}}
        <remove-team method1="remove(partner);" method2="state(transformer);"></remove-team>
      </li>
    </ul>
  </div>
</user-panel>

<div class="panel panel-primary">
  <div class="panel-heading">{{group}}</div>
  <div display-state="level" class="panel-body" ng-show="infocard">
    <span style="color:red"><b>{{name}}</b></span>
    <span ng-transclude></span>
    <div ng-show="'{{name}}'==='Ironman'">
      <button class="btn btn-danger" ng-click="callAvengers(user)">Call Avengers</button>
    </div>
    <div ng-show="'{{name}}'==='Batman'">
      <button class="btn btn-danger" ng-click="callAvengers(user)">Call Justice League</button>
    </div>
    <div ng-show="'{{name}}'==='Optimus Prime'">
      <button class="btn btn-danger" ng-click="callAvengers(transformer)">Call Autobots</button>
    </div>
  </div>
  <div ng-show="!infocard">
    <div ng-class="{textStyle: true}">{{message}}</div>
    <button class="btn btn-success" ng-click="callAvengers();">Display Info</button>
  </div>
</div>