Render json in table using AngularJs

by Kyle Pennell

HTML

<link rel="stylesheet" href="http://twitter.github.com/bootstrap/assets/css/bootstrap.css">
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.angularjs.org/1.0.1/angular-1.0.1.min.js"></script>
<div ng-app="likeSorter">
    <div ng-controller="TopListCtrl">
        <header>
            <div class="container">
                	<h1 class="logo">LikeSorter</h1>
            </div>
        </header>
        <div class="container content">
<!--

    <button class="btn-default" type="button" ng-click="getData(sc_user);">Sort</button></p>
	  <p id="search"><input ng-model="query" placeholder="Filter" type="text"/></p>
</div>

   <p id="nowsorting">Now sorting the Soundcloud likes of
                    <input type=text ng-model="sc_user">
                    <button class="btn-default" ng-click="getData(sc_user);">Sort</button>
                </p>
                <p id="search">
                    <input ng-model="query" placeholder="Filter" type="text" />
                </p>
-->

<div id="topelems">
<form id="nowsorting" ng-submit="getData(sc_user);">Now sorting the Soundcloud likes of 
        <input type="text" ng-model="text" name="text" />
            <input type="submit" id="submit" value="Submit" /> 
    </form>
                
                
            </div>
            <table class="table table-hover table-striped">
                <thead>
                    <tr>
                        <th><a href="" ng-click="sortField ='title'; reverse = !reverse">Song</a>
                        </th>
                        <th><a href="" ng-click="sortField ='user.username'; reverse = !reverse">Artist</a>
                        </th>
                        <th><a href="" ng-click="sortField = 'favoritings_count'; reverse = !reverse">Likes</a>
                        </th>
                        <th><a href="" ng-click="sortField = 'playback_count'; reverse = !reverse">Played</a>
                        </th>
           ...

CSS

body {
    background: #f7f7f7;
    margin: 0;
    padding: 0;
}
.container {
    width: 92%;
    max-width: 820px;
    positon: relative;
    margin: 0 auto;
}
header {
    height: 35px;
    background: #f76d02;
    margin-bottom: 10px;
    line-height: 30px;
    overflow: hidden;
    color: #FFF;
}
aside {
    position: fixed;
    width: 150px;
    display: block;
    left: 100px;
}
aside ul {
    list-style-type: none;
}
aside ul li {
    border-radius: 3px;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
    background: #FFF;
    padding: 2em 1em 1em 1em;
    margin-bottom: 1em;
}
aside ul li a {
    display: block;
    color: #424242;
    text-align: center;
    text-decoration: none;
}
.logo {
    background: url(../img/HN/logo.png) no-repeat;
    margin: 4px 0;
    padding: 0;
    text-indent: 37px;
    height: 35px;
    display: block;
    padding-top: 4px;
}
.upvote {
    height: 13px;
    width: 1em;
    background: url(../img/HN/up.gif) center center no-repeat;
    display: inline-block;
    margin: 0;
    padding: 0;
}
.table thead > tr > th > a {
    color: #0059B3;
}
.posts {
    list-style-image: url(../img/HN/up.gif);
    margin: 1em 0 3em 0;
    padding-left: 1.5em;
}
.posts li {
    margin-bottom: 1em;
    font-weight: 600;
    position: relative;
}
.posts li a {
    text-decoration: none;
    color: #424242;
}
.posts li:hover .url {
    opacity: 1;
}
.posts .url {
    font-weight: 200;
    font-size: 0.85em;
    margin-left: 0.5em;
    opacity: 0.5;
}
.posts .url:before {
    content:"(";
}
.posts .url:after {
    content:")";
}
.posts small {
    display: block;
    font-weight: 200;
    font-size: 0.8em;
}
.more, .more:visited {
    margin-left: 1.5em;
    background-color: #FC6621;
    display: inline-block;
    padding: 5px 10px 5px 10px;
    margin-right: 3px;
    margin-bottom: 1.5em;
    color: #ffffff;
    font-weight: bold;
    text-decoration: none;
    border-radius: 3px;
    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
    text-shadow: 0...

JavaScript

angular.module('likeSorter', []);


// Controller for pulling soundcloud data

function TopListCtrl($scope, $http) {
    $scope.sc_user = 'coolrivers'; //Loads my username in
    $scope.getData = function (sc_user) {
        var url = 'http://api.soundcloud.com/users/' + $scope.sc_user + '/favorites.json?client_id=0553ef1b721e4783feda4f4fe6611d04&limit=200&linked_partitioning=1&callback=JSON_CALLBACK';
        $http.jsonp(url).success(function (data) {
            $scope.likes = data;
            $scope.sortField = 'like.title';
            $scope.reverse = true;

        });
    }
    $scope.getData(); // Calls the function so the page has a starting point/starting user to Sort on

    $scope.alertme = function (permalink) {
        alert(permalink); // Made this to test that I could call it
    };
}