AngularStrap bs tabs + add slimscroll to tab

Question

I am using Angularstrap's Bs-tabs directive to add tabs to page.I am showing Tree View inside one tab.and I want to add SlimScroll bar to it.I am facing problem like I am unable to add Slim Scroll to both tabs.Only rail is coming,scrolling is not working

<div bs-tabs>
                    <div  class="parent-tab" style="width:310px;height: 670px;">
                    <div data-title="Tab 1" >
                    <div treeview="true"
                    tree-model="treeDataInJsonFormat"
                    node-id="id"
                    tree-id="treeSchema"
                    node-label="displayName"
                    node-children="childColumn"
                    dbl-click-event="addToQuery(node)" class="treeView">                </div>

                    </div>

                     </div>
                </div>


<script type="text/javascript">
angular.element('.parent-tab').slimScroll({
    size : '7px',
    position : 'right',
    color : '#afb1b2',
    alwaysVisible : true,
    distance : '2px',
    railVisible : true,
    railColor : 'white',
    railOpacity : 1,
    opacity:1,
    wheelStep : 10,
    allowPageScroll : true,
    disableFadeOut : true,
    height:'670px',
    width:'310px'
});</script>

Answer 1

One thing I came accross, is that using directives to manipulate content and to attach jQuery plugins is a much more sophisticated way and more generic to do.

As I was facing this problem right now, here's my (browserified) directive:

/**
 * A slimscroll.js directive
 *
 * Requires Slimscroll.js
 *
 * @type {exports}
 */
exports = module.exports = function (ngModule) {
    ngModule.directive('slimscroll', function ($parse) {
        return {
            restrict: 'A',
            link: function (scope, element, attrs) {
                height = angular.element(element).css('height');
                angular.element(element).slimScroll(
                        {
                            size: '7px',
                            color: ($(this).attr("data-handle-color") ? $(this).attr("data-handle-color") : '#a1b2bd'),
                            railColor: ($(this).attr("data-rail-color") ? $(this).attr("data-rail-color") : '#333'),
                            position: 'right',
                            height: height,
                            alwaysVisible: ($(this).attr("data-always-visible") == "1" ? true : false),
                            railVisible: ($(this).attr("data-rail-visible") == "1" ? true : false),
                            disableFadeOut: true
                        }
                );
            }
        }
    })
}