need to adjust scroll left for the tabs to occupy in angularjs application

Question

In my angularjs application I have approximately 23 tabs. So 90% of the width I have given for tabs with overflow : hidden, and 10% width Prev and Next icons. Each Tab has 36px width. So by default on the page 5 tabs are getting visible. Now when I click Next, I just want to scroll 5 tabs to left, like this continue till the last tab visible. So in my Next icon click event I am trying to do this some thing like the following, in my controller, to get the max scroll left and then use it but in my code maxScrollLeft is returning NaN.

 _self.getNextTabs = function () {            
          var maxScrollLeft = $element.scrollWidth - $element.clientWidth; 
          alert(maxScrollLeft);
          angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);    
        }

Here I have hard coded .scrollLeft(600); for testing purpose, so when I click Next, the tabs are scrolling left. But I want to make this scrolling to work correctly based on the max scroll left and the number of tabs that are being occupied. can any one help me in fixing it.

Answer 1

Not sure if _self.getNextTabs is in a directive, a controller or some other location, but the name $element indicates (to me) that it may be inside a directive?

If so, then I think $element may be a jquery object. AND - if that's the case, then you would need to use the syntax $element[0].scrollWidth et al...

_self.getNextTabs = function () {            
   var maxScrollLeft = $element[0].scrollWidth - $element[0].clientWidth; 
   angular.element(document.querySelector('.main_tabSet .nav-tabs')).scrollLeft(600);    
}