JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.2.10/angular.js"></script>
<div scrolling>This should have a scroll bar</div>
<panel>This should also have a scroll bar</panel>

CSS

.scrolling {
    overflow: scroll;
    height: 50px;
    margin-bottom: 20px;
}

JavaScript

var controls = angular.module('controls', []);
controls.service('ScrollingBehavior', function () {
    this.link = function ($scope, $element) {
        $element.addClass('scrolling');
    }
});

controls.directive('scrolling', ['ScrollingBehavior', function (ScrollingBehavior) {
    //pretend that this has its own individual scope
    return {
        restrict: 'A',
        link: function ($scope, $element) {
            console.log("Linking scrolling");
            ScrollingBehavior.link($scope, $element);
        }
    }
}]);

controls.directive('panel', ['ScrollingBehavior', function (ScrollingBehavior) {
    return {
        restrict: 'E',
        transclude: true,
        replace: true,
        template: '<div ng-transclude></div>',
        //pretend that this has its own individual scope
        link: function ($scope, $element) {
            console.log("Linking panel");
            ScrollingBehavior.link($scope, $element);
        }
    }
}]);

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

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