Decorative directive: display the change in state

<!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'
    ],
    level: 0
  }
  $scope.style="textStyle";

  $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'
    ],
    level: 0
  }
});
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);
      };
      $scope.state = function(user) {
        user.level++;
        user.level = user.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;
}

<div class="panel panel-primary" ng-show="infocard">
  <div class="panel-heading">{{user.alias}}</div>
  <div display-state="user.level" 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 method1="remove(team);" method2="state(user);"></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" ng-class="{textStyle: true}">{{user.message}}</div>
  <button class="btn btn-success" ng-click="callAvengers(user);">Display Info</button>
</div>

<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>