var app = angular.module('plunker', []);

app.controller('MainCtrl', function($scope) {
  $scope.songs = [
    {
        "name": "That I Would Be Good",
        "author": "Alanis Morissette",
        "tags": [],
        "difficulty": 3,
        "url": "Alanis Morissette - That I Would Be Good.mid",
        "crc": "EC13CE45"
    },
    {
        "name": "Fernando",
        "author": "Abba",
        "tags": [],
        "difficulty": 2,
        "url": "Abba - Fernando.mid",
        "crc": "A3F8DD01"
    },
    {
        "name": "30 Seconds To Mars",
        "author": "Hurricane",
        "tags": [],
        "difficulty": 1,
        "url": "30 Seconds To Mars - Hurricane.mid",
        "crc": "68B05C12"
    }
];
});

app.filter('search', function () {
    function replace(where, what) {
        return where.replace(new RegExp(what, 'gi'), '<span class="ListView-search-match">$&</span>');
    }
    return function (oldSongs, input) {
        if(typeof input == "string" && input.length > 0) {
            var newSongs = oldSongs.map(function (song) {
                return Song.clone(song);
            });
            var newInput = "(" + input.toLowerCase().split(" ").filter(function (input) {
                return input.length > 0;
            }).join("|") + ")";
            var filteredNewSongs = newSongs.filter(function (newSong, i) {
                newSong.name = replace(newSong.name, newInput);
                newSong.author = replace(newSong.author, newInput);
                newSong.tags.forEach(function (tag, j) {
                    newSong.tags[j] = replace(tag, newInput);
                });
                var inTags = newSong.tags.some(function (tag, j) {
                    return newSong.tags[j] != oldSongs[i].tags[j];
                });
                return newSong.name != oldSongs[i].name || newSong.author != oldSongs[i].author || inTags;
            });
            return filteredNewSongs;
        } else {
            return oldSongs;
        }
    };
});

var Song;
(function (Song) {
    function clone(song) {
        return {
            name: song.name,
            author: song.author,
            tags: (song.tags).slice(),
            difficulty: song.difficulty,
            url: song.url,
            crc: song.crc
        };
    }
    Song.clone = clone;
})(Song || (Song = {}));


<!doctype html>
<html ng-app="plunker" >
<head>
  <meta charset="utf-8">
  <title>AngularJS Plunker</title>
  <script>document.write("<base href=\"" + document.location + "\" />");</script>
  <link rel="stylesheet" href="style.css">
  <script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.1/angular.js"></script>
  <script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
  <input type="text" ng-model="songQuery" autofocus="autofocus"/>
  <div ng-repeat="song in songs | search:songQuery">
    <span ng-bind-html-unsafe="song.name + ' (' + song.author + ')'"></span>
  </div>
</body>
</html>
/* Put your css in here */