TableView.html

 <section  ng-controller="TableCtrl">
    <article>
        <h2 class="bolder">Welcome to The Palm Beach Post’s property insurance guide.</h2>
        <p> Below you will find financial strength grades from two rating organizations, plus the Post’s analysis of state records showing who generates the most complaints.</p>
        <p>Read the full report <a class="highlightlink" href="http://www.mypalmbeachpost.com/news/business/special-report-how-safe-is-your-florida-property-i/njL5K/#1bb79b6f.3802568.735572" target="blank">here.</a>
        <p>Search by company. <span class="hide-S">Click on the table headers to sort.</span> Click company names for more information on each. Or just browse the whole list. 
        Scroll down to get started!</p>

        <div id="collapsable" >
            <div id="collapsableheader" ng-class="{'expanded': expand}" ng-click="expand=!expand"><h3>What the Ratings Mean</h3> (click to <span ng-hide='expand'>see more</span><span ng-show='expand'>collapse</span>)</div>
            <div id="collapsablebody" ng-show='expand'>
                <p><b><a href="http://www.weissratings.com/" target="_blank">Weiss Ratings</a>, Jupiter</b> — A+ means top financial strength including ability to pay claims, E means weakest. Weiss has been rating property and casualty insurers since 1993 and does not take money from insurers. It says its ratings are consumer-oriented. Ratings are for the latest quarter available.  Website: weissratings.com</p>

                <p><b><a href="http://www.demotech.com/" target="_blank">Demotech, Inc.</a>, Dublin, Ohio</b> — A'' is its top financial strength rating, followed by A' and A, and others. NR means not rated by Demotech. Incorporated in 1985, Demotech plays an important role in determining which insurers are considered acceptable in the mortgage lending marketplace. It does not rate state-run Citizens, and covers some but not all affiliates of large, national insurers. Ratings are the latest available on its website: demotech.com</p>

                <p><b>Complaint rating</b> — This is a ranking based on number of complaints relative to a company’s number of customers.
                <ul id="ratinglegend">
                    <li><img src="./icons/icon1.png"/> : Companies with the fewest complaints per capita, ranking in the top third in the state.</li>
                    <li><img src="./icons/icon2.png"/> : Companies ranking in the middle third in the state on complaints per capita.</li>
                    <li><img src="./icons/icon3.png"/> : Bottom third of the companies with the worst complaints per capita ratio.</li>
                    <li><img src="./icons/icon0.png"/> : No complaint data available.</li>
                </ul>
                <p class="notes"><b>Notes</b> —  Complaints are for a two year period ended Dec. 31, 2014. Customer count is the number of residential customers in Florida as of Dec. 31. State ranking in market share may vary from county share. Complaints represent those logged by the Florida Department of Financial Services, as obtained by The Palm Beach Post in a records request. State officials consider complaints to include requests for mediation of claims.</p>
            <div>
        </div>
    </article>
    <section id="search">
        <p class="bolder">Search: </p>
        <input id="searchbox" type="text" ng-model="search.name" placeholder="Search by company name">
    </section>
    <table id="Table1">
            <thead>             
                <tr>
                    <th ng-class="{'sorted':isSorted('name'),
                                 'ascending':isAscending('name'),
                                 'descending':!isAscending('name')}"
                         ng-click="sortTable('name')">
                         Company
                     </th>
                    <th ng-class="{'sorted':isSorted('weissrank'),
                                 'ascending':isAscending('weissrank'),
                                 'descending':!isAscending('weissrank')}"
                         ng-click="sortTable('weissrank')">
                         Weiss
                     </th>
                    <th ng-class="{'sorted':isSorted('demotechrank'),
                                 'ascending':isAscending('demotechrank'),
                                 'descending':!isAscending('demotechrank')}"
                        ng-click="sortTable('demotechrank')">
                        Demotech
                    </th>
                    <th ng-class="{'sorted':isSorted('policycount'),
                                 'ascending':isAscending('policycount'),
                                 'descending':!isAscending('policycount')}"
                        ng-click="sortTable('policycount')">
                        # Policies
                    </th> 
                    <th ng-class="{'sorted':isSorted('total_complaints'),
                                 'ascending':isAscending('total_complaints'),
                                  'descending':!isAscending('total_complaints')}"
                      ng-click="sortTable('total_complaints')">
                      # Complaints
                    </th> 
                    <th ng-class="{'sorted':isSorted('complaintpercentile'),
                                 'ascending':isAscending('complaintpercentile'),
                                 'descending':!isAscending('complaintpercentile')}"
                         ng-click="sortTable('complaintpercentile')">
                         Complaint rating
                     </th> 
                </tr>           
            </thead>
             <tr ng-repeat="company in companies.data| filter:search">
                <td class="compName"><a href="#/detail/{{company.id}}">{{company.name}}</a></td>
                <td>{{company.weiss}}</td>
                <td>{{company.demotech}}</td>
                <td>{{company.policycount_display.replace('.',',')}}</td>
                <td>{{company.total_complaints_display.replace('.',',')}}</td>
                <td><img class="ratingicon" src="./icons/icon{{company.complaintpercentilegroup}}.png"/></td>
             </tr>
        </table>
        <hr/>
        <footer id="footercredits">
            <p><b>Icons from <a href="http://www.thenounproject.com" target="_blank">Noun Project</a></p></b><p>
            <p>Main logo designed by <a href="http://thenounproject.com/Fhlcreative/" target="_blank">Phil Goodwin.</a> Rating icons designed by <a href="http://thenounproject.com/tobiasfabian/" target="_blank">Tobias F. Wolf</a></p>
        </footer>
</section>