Edit in JSFiddle

angular
  .module('demo', [])
  .directive('caseSwitcher', function() {
    return {
      restrict: 'E',
      template: [
        '<div>',
          '<input type="text" ng-model="ctrl.username" />',
          '<button ng-click="ctrl.toUpperCase()">UPPERCASE!</button>',
          '<button ng-click="ctrl.toLowerCase()">lowercase!</button>',
          '<h1>{{ ctrl.username }}</h1>',
        '</div>'
      ].join(''),
      controllerAs: 'ctrl',
      controller: function() {
        var ctrl = this;

        ctrl.username = '';

        ctrl.toUpperCase = function() {
          ctrl.username = ctrl.username.toUpperCase();
        };

        ctrl.toLowerCase = function() {
          ctrl.username = ctrl.username.toLowerCase();
        };
      }
    }
  });

angular.bootstrap(document.querySelector('.app'), ['demo']);