Angularjs list.js排序和视图更改不使用angular

我在角度范围内有艺术家信息，并使用ng repeat to repeat列出模板中的所有艺术家信息。我正在尝试使用排序（名称、标题、标签、视图）数据。我使用bower安装了list.js，并在html模板

我正试图复制这一点，但有角度

我知道角度排序

问题：排序和视图更改似乎不起作用

按名称排序
按项目排序
按标签排序
改变看法


angular.module（“堆栈”，[]）
.控制器（“移动”，功能（$scope）{
var计数=0；
var count1=0；
var details=document.getElementsByClassName（'details'）；
$scope.friends=[{姓名：'John'，电话：'555-1212'，年龄：10}，
{姓名：'Mary'，电话：'555-9876'，年龄：19}，
{姓名：'Mike'，电话：'555-4321'，年龄：21}，
{姓名：“亚当”，电话：“555-5678”，年龄：35}，
{姓名：'Julie'，电话：'555-8765'，年龄：29}
];
$scope.sort='-age'；
$scope.change=函数（）{
计数++；
如果（计数%2！==0）{
$scope.sort='age'；
}否则{
$scope.sort='-age'；
}
}
$scope.changeView=函数（）{
count1++；
如果（计数1%2！==0）{
对于（变量i=0；i

堆栈
{{friend.name}
{{朋友.电话}

{{friend.age}

按年龄分类
改变看法
list.js需要在angular返回您最后的数据后运行。所以在你的ng中重复这样做。他将检查最后一个项目何时呈现


ng init=“$last？doFilter（）：angular.noop（）”
Batman-这太棒了！但是我一直在寻找使用list.js进行排序和查看更改的方法。你想使用list.js实现上述功能吗？是的！我的设计就是基于上面提到的代码笔，如果能有排序和查看更改功能就好了。你想把list.js和angularjs一起使用吗？是的，我想把list.js和angularjs一起使用！可能复制辉煌！这就是问题的答案。
<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>