ng-scrollbar directive not working

[mukulgupta2507]

Hi,

I'm trying to use ng-scrollbar in my project for implementing a scrollbar but somehow it's not working for me. I have included following files in my index.html:

<script src="bower_components/ng-scrollbar/dist/ng-scrollbar.js"></script>

Also, my jade template looks like this:

<li id="notification-button" class="dropdown notifications-menu"><a href="#notifications" data-toggle="dropdown" aria-expanded="false" class="dropdown-toggle"><i class="fa fa-bell-o"></i><span class="label label-warning">{{user.notifications.count}}</span></a>
  <ul class="dropdown-menu">
    <li class="header">{{user.notifications.count}} notifications.</li>
    <li> 
      <div ng-scrollbar="ng-scrollbar">
        <ul style="overflow: hidden; width: 100%; height: auto;" class="menu">
          <li ng-repeat="notification in user.notifications"><a href="#"><i class="fa fa-users text-aqua"></i>{{notification.text}}</a></li>
        </ul>
      </div>
    </li>
    <li class="footter"><a href="#">View all</a></li>
  </ul>
</li>

My css corresponding to this block looks like:

.navbar-nav > .notifications-menu {
  > .dropdown-menu > li .menu {
    // Links inside the menu
    > li > a {      
      color: #444444;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      padding: 10px;
      // Icons inside the menu
      > .glyphicon,
      > .fa,
      > .ion {
        width: 20px;
      }
    }

  }
}

For exact CSS, you can take a look at this https://almsaeedstudio.com/preview. I'm just trying to implement the notification icon with a scrollbar functionality.

Can anyone please tell me where exactly am I doing wrong ? It'll be great if someone can give me a simple example of how to use this ?

Thanks

[towry]

not working