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

  <head>
    <script data-require="angular.js@1.3.15" data-semver="1.3.15" src="https://code.angularjs.org/1.3.15/angular.js"></script>
    <link rel="stylesheet" href="style.css" />
    <script src="script.js"></script>
  </head>

  <body ng-controller="UpController">
    <span>{{ name | up }}</span>
  </body>

</html>
angular.module('upperDemo', [])
.controller('UpController', ['$scope', function($scope){
    $scope.name = 'hello howard.zuo';
}])
.filter('up', [function(){
    return function(value){
        return value.toUpperCase();
    };
}]);
html {
  width: 100%;
  height: 100%;
}
body {
  width: 100%;
  height: 100%;
  overflow: hidden;
  background-color: #fff;
}
span {
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  top: 50%;
  -webkit-transform: translateY(-50%);
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
  left: 50%;
  -webkit-transform: translateX(-50%);
  -ms-transform: translateX(-50%);
  transform: translateX(-50%);
}