Example App

Angular E2E testing using Protractor will be run against this code.

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/lodash.js/2.4.2/lodash.min.js"></script>
<div ng-app='test'>
  <div ng-controller='divCtrl'>
    <input type='button' ng-value='buttonVal' ng-click='changeText()'>
  </div>
  <output-directive></output-directive>
</div>

CSS

.output {
  position: relative;
  left: 75px;
  top: -19px;
}

JavaScript

var app = angular.module('test', []);
app.controller('divCtrl', function($scope) {
	$scope.buttonVal = 'Click me!';
});
(function(module) {
	'use strict';
  module.directive('outputDirective', [
  	function() {
    	return {
      	scope: false,
      	restrict: 'E',
      	template: '<div class="output">' +
                    '<span>{{randomText}}</span>' +
                  '</div>',
        replace: true,
        link: function($scope, elem, attrs) {
        	_.extend($scope, {
          		randomText: 'something',
              changeText: function() {
                $scope.randomText = 'nothing';
        				elem.css('text-decoration', 'underline');
              }
          });
        }
      };
    }
  ]);
})(angular.module('test'));