<!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>
  </body>

</html>
angular.module('myApp', []);
angular.module('myApp').controller('mainCtrl', function($scope) {
  $scope.user = {
    name: 'Tony Stark',
    alias: 'Ironman',
    address: {
      street: '10880, Malibu Point',
      city: 'Malibu, Calif',
      country: 'United States',
    },
    teamAffiliation: [
      'Avengers', 'S.H.I.E.L.D', 'Stark Industries', 'Guardians of galaxy'
    ],
    abilities: "Genius-level intellect and highly proficient Scientist, Engineer and business man"
  }

  $scope.DCUser = {
    name: 'Bruce Wayne',
    alias: 'Batman',
    address: {
      street: '1007 Mountain Drive',
      city: 'gotham',
      country: 'United States',
    },
    teamAffiliation: [
      'Justice League', 'Batman Family', 'Wayne Enterprise', 'Outsiders'
    ],
    abilities: "Genius-level intellect and highly proficient Scientist, Engineer and business man"
  }
});
angular.module('myApp').directive('displayInfo', function() {
  return {
    templateUrl: "displayInfo.html",
    restrict: "EA",
    scope: {
      user: '=',
      showInfo: '@infocard'
    },
    controller: function($scope) {
      $scope.infocard = ($scope.showInfo === 'true');

      $scope.callAvengers = function(user) {
        $scope.infocard = !$scope.infocard;
        user.message = "We will arrive soon buddy!"
      };
      $scope.remove = function(team) {
        var index = $scope.user.teamAffiliation.indexOf(team);
        $scope.user.teamAffiliation.splice(index, 1);
      };
    }
  }
});
angular.module('myApp').directive('removeTeam', function() {
  return {
    templateUrl: "removeTeam.html",
    restrict: "E",
    scope: {
      notifyRemove: '&method'
    },
    controller: function($scope) {
      $scope.isRemove = function() {
        $scope.removing = true;
      };
      $scope.cancelRemove = function() {
        $scope.removing = false;
      }
      $scope.confirmRemove = function() {
        $scope.notifyRemove();
      };
    }
  }
});
/* Styles go here */

<div class="panel panel-primary" ng-show="infocard">
  <div class="panel-heading">{{user.alias}}</div>
  <br />
  <div class="panel-body">
    <span style="color:red">Name:{{user.name}}</span>
    <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 method="remove(team);"></remove-team>
      </li>
    </ul>
    <div ng-if="user.name==='Tony Stark'">
      <button class="btn btn-danger" ng-click="callAvengers(user)">Call Avengers</button>
    </div>
    <div ng-if="user.name==='Bruce Wayne'">
      <button class="btn btn-danger" ng-click="callAvengers(user)">Call Justice League</button>
    </div>
  </div>
</div>
<div ng-show="!infocard">
  <div ng-show="user.message">{{user.message}}</div>
  <button class="btn btn-success" ng-click="callAvengers(user);">Display Info</button>
</div>
<span class="glyphicon glyphicon-remove" ng-click="isRemove();"></span>
<span ng-show="removing">
  <button class="btn btn-xs btn-success" ng-click="confirmRemove();">confirm</button>
  <button class="btn btn-xs btn-danger" ng-click="cancelRemove();">cancel</button>
</span>