AngularJS Live Example

HTML

<div ng:app="ShuffleModule">
 <div ng-controller="ShuffleController">   <ul>
     <li ng-repeat="value in array | shuffle | limitTo:3">
           {{value}} 
       </li>
   </ul>
     <div>{{ array }}</div>
     <a href="" ng-click="add('a')">Add</a>
 </div>
    

</div>

CSS

.ng-invalid { border: 1px solid red; } 
body { font-family: Arial,Helvetica,sans-serif; }
body, td, th { font-size: 14px; margin: 0; }
table { border-collapse: separate; border-spacing: 2px; display: table; margin-bottom: 0; margin-top: 0; -moz-box-sizing: border-box; text-indent: 0; }
a:link, a:visited, a:hover { color: #5D6DB6; text-decoration: none; }
.error { color: red; }

JavaScript

var shufflemodule = angular.module('ShuffleModule', []);

shufflemodule.filter('shuffle', function() {
    var shuffledArr = [],
        shuffledLength = 0;
    return function(arr) {
        var o = arr.slice(0, arr.length);
        if (shuffledLength == arr.length) return shuffledArr;
        for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
        shuffledArr = o;
        shuffledLength = o.length;
        return o;
    };
});

function ShuffleController($scope) {
  $scope.array = ['a','b','c','d','e','f','g','h','i','j','k','l','m','n','o','p'];
    $scope.add = function (i) {
       $scope.array.push(i);   
    }
}