Angular: Empty Fiddle

http://angularjs.org/

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.min.js"></script>
<div ng-controller="MyCtrl">
    
    <h1 highlighter active-input="active.value" set-input="false">Click me to update Value in scope: {{active}}</h1>

</div>

CSS

.activeInput {
    background-color:red
}

JavaScript

var myApp = angular.module('myApp', []);

myApp.directive('highlighter', function () {
    return {
        restrict: 'A',
        replace: true,
               scope: {
                    activeInput: '='
                },
        link: function (scope, element, attrs) {
            element.bind('click', function () {
                
                scope.$apply(function() {
                    scope.activeInput = attrs.setInput 
                });
            })
        }
    }
});

//myApp.factory('myService', function() {});

function MyCtrl($scope) {
             $scope.active = {
                value : true
            };
}