User Status directive

<!DOCTYPE html>
<html>

  <head>
    <script data-require="angular.js@1.4.6" data-semver="1.4.6" src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.4.6/angular.min.js"></script>
    <script src="script.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.4.0/css/font-awesome.min.css">
    <style type="text/css">
      body {
        font-family: Helvetica, sans-serif;
      }
      .fa-times {
        color: firebrick;
      }
      .fa-check {
        color: darkgreen;
      }
    </style>
  </head>

  <body ng-app="userFullnameDemo" ng-controller="DemoCtrl as ctrl">
    <h2>Users</h2>
    <ul>
      <li ng-repeat="user in ctrl.users">
        <user-status user="user"></user-status>
        <user-fullname user="user"></user-fullname>
      </li>
    </ul>
  </body>

</html>

// Code goes here

angular.module('userFullnameDemo', [])
.directive('userFullname', function() {
  return {
    restrict: 'E',
    template: '<span>{{ user.firstname }} {{ user.lastname }}</span>',
    scope: {
      user: '='
    }
  };
})
.directive('userStatus', function() {
  return {
    restrict: 'E',
    template: '<span><i ng-class="us.iconCss()"></i> ({{ us.user.status }})</span>',
    scope: {
      user: '='
    },
    controllerAs: "us",
    bindToController: true,
    controller: function() {
      var vm = this;
      vm.iconCss = function() {
        return vm.user.status === "enabled" ? 
          "fa fa-check" : "fa fa-times";
      };
    }
  };
})
.controller('DemoCtrl', function() {
  var vm = this;
  vm.users = [{
    firstname: "Bob",
    lastname: "Slydell",
    status: "enabled"
  }, {
    firstname: "Milton",
    lastname: "Waddams",
    status: "disabled"
  }];
});