AngularJS Play with DOM and JS

With Use of JQuery and Angular JS here we have first created a JS Object from a list and a table from that Object

by amitrdx

HTML

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script>
<ul class="list profits" id="list">
    <li><a href="http://money.cnn.com/magazines/fortune/fortune500/2013/snapshots/2255.html?iid=F500_fl_list">
        <span class="rank listCol1">1</span> <span class="name listCol2">Wal-Mart Stores</span>
        <span class="revenues-rounded listCol3">469.2</span> <span class="revenues hidden">469,162</span>
        <span class="profits-visible">16,999</span> <span class="assets-visible">203,105</span>
        <span class="employees-visible">2,200,000</span> <span class="totSHEqty-visible">76,343</span>
        <span class="totRTI-visible">17.6 </span><span class="totRTI5YAR-visible">10</span>
        <span class="totRTI10YAR-visible">4.9 </span><span class="ePS-visible">5.02 </span>
        <span class="ePSChange-visible">11.1 </span><span class="ePS5YAR-visible">9.9 </span>
        <span class="ePS10YAR-visible">10.7 </span><span class="prftPctSls-visible">3.6</span>
        <span class="prftPctAsts-visible">8.4</span> <span class="prftPctSHEqty-visible">22.3
        </span>
        <!--For Filtering-->
        <span class="hqState">AR</span> <span class="industry">1008</span>
        <!--For Sorting-->
        <span class="profits hidden">1169990</span> <span class="assets hidden">3031050</span>
        <span class="employees hidden">23000000</span> <span class="totSHEqty hidden">1763430</span>
        <span class="totRTI hidden">1000176 </span><span class="totRTI5YAR hidden">1000100</span>
        <span class="totRTI10YAR hidden">1000049 </span><span class="ePS hidden">1000050.2
        </span><span class="ePSChange hidden">1000111 </span><span class="ePS5YAR hidden">1000099
        </span><span class="ePS10YAR hidden">1000107 </span><span class="prftPctSls hidden">
            1000036</span> <span class="prftPctAsts hidden">1000084</span> <span class="prftPctSHEqty hidden">
                1000223 </span></a>

    </li>
   ...

CSS

body {
    font-family:Verdana;
    font-size:12px;
}
ul {
    display:none;
}
table {
    border-collapse: collapse;
    color:#fff;
}
tr td:first-child {
    background:#555;
}
tr th {
    font-weight:bold;
    background:#000 !important;
    color:#ddd !important;
}
tr:nth-child(odd) {
    background-color:#777;
}
tr:nth-child(even) {
    background-color:#888;
}
td, th {
    padding:4px;
}

JavaScript

function AppCtrl($scope) {

    $scope.f500 = [];
    var Company = (function () {
        function Company() {}
        return Company;
    })();

    $("#list>li>a").each(function () {
        var obj = new Company
        obj.rank = $(this).find("span.rank").text();
        obj.name = $(this).find("span.name").text();
        obj.revenues = $(this).find("span.revenues-rounded").text();
        obj.profits = $(this).find("span.profits-visible").text();
        $scope.f500.push(obj);
        obj = null;
    })
    //console.log($scope.f500);
}