Conditional Table row in angularJs

Question

I have angular display some tables with data from a JSON file.

<div class="inner">
    <div ng-controller="Picks">
        <element>
        <th><b></b></th>
        </element>
        <table id="myTable" class="tablesorter">
            <thead>

                <tr>
                    <th style="width: 70px">League</th>
                    <th style="width: 150px">Away<br>Home
                    </th>
                    <th style="width: 130px">Score</th>
                    <th style="width: 200px">Game Clock</th>
                    <th style="width: 200px">Wager</th>
                    <th style="width: 100px">Amount</th>
                    <th style="width: 100px">Odds</th>
                    <th style="width: 90px">Result</th>
                    <th style="width: 80px">Net</th>
                    <th style="width: 100px;">Game Date</th>
                </tr>
            </thead>

            <tr><td>&nbsp;</td></tr>
            <tbody ng:repeat="i in picks" style="height: 50px; left: 50px">
                <tr style="border-top: 1px solid #000; text-align:left">
                    <td rowspan="2" style="width: 70px">{{i.league}}</td>
                    <td style="width: 150px">{{i.teamName[0]}}</td>
                    <td style="width: 30px">{{i.teamScore[0]}}</td>
                    <td rowspan="2" style="width: 100px">{{i.quarter}}</td>
                    <td rowspan="2" style="width: 200px"><b>{{i.pick}}</b></td>
                    <td rowspan="2" style="width: 100px">{{i.units}} Unit(s)</td>
                    <td rowspan="2" style="width: 100px">{{i.odds}}</td>
                    <td rowspan="2" style="width: 80px">{{i.result}}</td>
                    <td rowspan="2" style="width: 80px">{{i.net | number}}
                        Unit(s)</td>
                    <td rowspan="2" style="width: 100px; text-align: center">{{i.time}}</td>
                </tr>

                <tr style="text-align:left">
                    <td style="width: 150px">{{i.teamName[1]}}</td>
                    <td style="width: 30px">{{i.teamScore[1]}}</td>
                </tr>


                <tr><td>&nbsp;</td></tr>
            </tbody>
        </table>
    </div>
</div>

function Picks($scope, $http) {
    $http.get('http://xxxxxxxx/Service/picks').
        success(function(data) {
            $scope.picks = data;
        });
}

Now what I want to do is, if there exists a pick2 property in the json, then create another tr and display some information.

How can I create this conditonal HTML row?

The JSON is shown below, sometimes there will be a pick2, and a pick3. When they exist, Id like the units2, odds2, result2, etc associated with that pick to be displayed on my table:

Answer 1

    <tbody ng:repeat="i in picks" style="height: 50px; left: 50px">
            <tr style="border-top: 1px solid #000; text-align:left">
                ....
            </tr>
             <tr ng-show="i.pick2 !== '' && i.pick2 !== undefined && i.pick2 !== null">
              ...
           </tr>
  </tbody>

This way you can display tr conditionally.