Show/Hide <tr> based on dropdown select - angularjs

Question

I have the following array of objects in my controller :

$scope.reportsValuesOptions = [  
   {  
      "value":"Cash Position Report",
      "option":"Cash Position Report"
   },
   {  
      "value":"Detail Report",
      "option":"Detail Report"
   },
   {  
      "value":"Reconciliation Report",
      "option":"Reconciliation Report"
   },
   {  
      "value":"Summary Report",
      "option":"Summary Report"
   },
   {  
      "value":"Sweep Report",
      "option":"Sweep Report"
   },
   {  
      "value":"FCCS/FBPS Detail Report",
      "option":"FCCS/FBPS Detail Report"
   },
   {  
      "value":"CustomReport",
      "option":"Custom Report Name"
   }
];

Here is my dropdown which gets populated based on the above array :

<select name="rname" id="rname" ng-model="rname" ng-options="report.option for report in reportsValuesOptions track by report.value">
    <option value="">---Select---</option>
</select>

Here is the row which I want to show based on above dropdown value

<tr ng-if="rname === CustomReport">
    <td class="label-cell">* Custom account Number(s) :</td>
    <td>
        <input type="text" id="custaccountNumber" name="custaccountNumber" ng-model="custaccountNumber" />
    </td>
</tr>

I want to show a <tr> only if my dropdown value changes to 'CustomReport'

FULL EXAMPLE

When I run the html the <tr> gets displayed, and as soon as I select ANY option, it hides. I want the <tr> to be hidden BY DEFAULT and show ONLY WHEN I select 'CustomReport' value option from the dropdown. It should hide on selecting any other option.

Answer 1

In addition to your ngModel actually be an object , you have to use single quotes in your comparison, as below:

<tr ng-if="rname.value === 'CustomReport'">

DEMO