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']);