list.js sorting and view change not working with angular

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. 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!

Problem: Sorting and view change doesn't seems to work

<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>

Solution

angular.module("stack", [])
    .controller("move", function($scope) {
        var count = 0;
        var count1 = 0;
        var details = document.getElementsByClassName('details');
        $scope.friends = [{ name: 'John', phone: '555-1212', age: 10 },
            { name: 'Mary', phone: '555-9876', age: 19 },
            { name: 'Mike', phone: '555-4321', age: 21 },
            { name: 'Adam', phone: '555-5678', age: 35 },
            { name: 'Julie', phone: '555-8765', age: 29 }
        ];
        $scope.sort = '-age';
        $scope.change = function() {
            count++;
            if (count % 2 !== 0) {
                $scope.sort = 'age';
            } else {
                $scope.sort = '-age';
            }
        }

        $scope.changeView = function() {
            count1++;
            if (count1 % 2 !== 0) {
                for (var i = 0; i < details.length; i++) {
                    details[i].style.width = 10 + '%';
                    details[i].style.display = 'inline-block';
                }

            } else {
                for (var i = 0; i < details.length; i++) {
                    details[i].style.width = 10 + '%';
                    details[i].style.display = 'block';
                }
            }
        }
    });

<!DOCTYPE html>
<html ng-app="stack">

<head>
    <title>stack</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7" crossorigin="anonymous">
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.0-rc.0/angular.min.js"></script>
</head>

<body ng-controller="move">
    <div ng-repeat="friend in friends | orderBy:sort" class="details">
        <h3>{{friend.name}}</h3>
        <p>{{friend.phone}}</p>
        <p>{{friend.age}}</p>
    </div>
    <button ng-click="change()">sort by age</button>
    <button ng-click="changeView()">change view</button>
    <script type="text/javascript" src="controller.js"></script>
</body>

</html>

i have added the basic code for sorting and the change view.Do you need the whole solution?