Angular: Empty Fiddle

http://angularjs.org/

by user1572526

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
    };
}