title: Angularjs independent scrolls for different div
body: <p>I have two divs in my angular project. I want the two divs to have independent scroll bars.</p>
  
  <p>The divs are constructed like this.</p>
  
  <pre><code>&lt;div ng-show="$state.includes('base.videolist')||$state.includes('base.movielist')"&gt;
     &lt;ul class="nav navbar-fixed-top roboto nav-tabs"&gt;
        &lt;li ui-sref="base.videolist" ui-sref-active="active"&gt;&lt;a&gt;Videos&lt;/a&gt;&lt;/li&gt;
        &lt;li ui-sref="base.movielist" ui-sref-active="active"&gt;&lt;a&gt;Movies&lt;/a&gt;&lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  
  &lt;div id="bvl" class="scrol_sctn"  ui-view="videolist" ng-init="pullFingerprintData()" ng-show="$state.includes('base.videolist')"&gt;&lt;/div&gt;
  &lt;div id="bml" class="scrol_sctn"  ui-view="movielist" ng-show="$state.includes('base.movielist')"&gt;&lt;/div&gt;
  &lt;div id="vpl" class="cdnfullscreen" ui-view="videoplayer" ng-show="$state.includes('base.videoplayer')"&gt;&lt;/div&gt;
  </code></pre>
  
  <p>I want the divs bvl and bml to have independent scrolls. This is my css file.</p>
  
  <pre><code>body {
      background:#a5c8f3 !important;
      font-family: 'Raleway', sans-serif;
      padding-top: 50px;
      overflow: hidden;
  }
  .scrol_sctn { 
      margin:0; 
      padding:0;
      overflow-y: auto;
      overflow-x: hidden;
  }
  </code></pre>
  
  <p>I hid the scroller for the body tag so that I can have independent tags for the bml and bvl tags. But doing this stops the entire page from using scrolls. Any help to achieve this is much appreciated.</p>