list.js sorting in angular not working

I have artists information in the angular scope and used ng-repeat to repeat to list all artist info in the template. I am trying to sort (name, title, label, view) data using list.js. Unfortunately, the sorting part doesn't seems to work. I have installed list.js using bower and mentioned the source in the html template <script src="/static/vendors/list.js/dist/list.min.js"></script>.

I am exactly trying to replicate this codepen but with angular.

I am aware about angular sorting!

<div id="artists">   <input class="search" placeholder="Search" />   <button class="sort" data-sort="artist-name">
    Sort by name   </button>   <button class="sort" data-sort="album-title">
    Sort by Project   </button>   <button class="sort" data-sort="record-label">
    Sort by Label   </button>   <button class="sort" id="viewSwitch">
    Change View   </button>


  <ul class="list" id="list">
    <li  ng-repeat="item in artists >
      <img src="http://placehold.it/120x120" alt="#" />
      <h3 class="artist-name">{{item.artist-name}}</h3>
      <p class="album-title">{{item.artist-title}}</p>
      <p class="record-label">{{item.record-label}}</p>
    </li>   </ul> </div>

<script> var options = {   valueNames: [ 'artist-name', 'artist-title', 'record-label' ] };

var artistList = new List('artists', options);

// View Switcher

$('#viewSwitch').on('click',function(e) {
    if ($('ul').hasClass('grid')) {
        $('ul').removeClass('grid').addClass('list');
    }
    else if($('ul').hasClass('list')) {
        $('ul').removeClass('list').addClass('grid');
    } }); </script>