Using value of ng-model in ng-if

I have a text box where I enter an idNumber. I want to check if that id number appears in my table. If it does, I want to add a glyphicon to that row.

Now, my problem is that I don't know how to access ng-model="idNumber" from ng-if.

I try using ng-if="data.id== {{idNumber}}" but that does not work.

        <div class="container" id="inputDiv">
            <div>
                <input type="text" class="form-control" ng-model="idNumber">
            </div>
        </div>

        <div class="container col-md-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Id number</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="data in idData">
                    <td>{{data.id}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.dokumenttype}}</td>
                    <td>
                      <span ng-if="data.id== {{idNumber}}">
                        <span class="glyphicon glyphicon-asterisk"></span>
                      </span>
                    </td>                    
                </tr>
                </tbody>
            </table>
        </div>

Solution

You do not need to put an expression here, just replace it as,

<span ng-if="data.id===idNumber">
    <span class="glyphicon glyphicon-asterisk"></span>
</span>

DEMO

var myApp=angular.module('myApp',[]);

myApp.controller('thecontroller',function($scope){
   $scope.idData = [{
  "id": "1",
  "name": "Kimberlyn",
  "documentType": "McGaw"
}, {
  "id": "2",
  "name": "Harmony",
  "documentType": "Sedworth"
}, {
  "id": "3",
  "name": "Adela",
  "documentType": "Blenkin"
}];
});

<!DOCTYPE html>
<html>
    <head>
      <title>ng-Messages Service</title>
      <script src='https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js'></script>
        <script src='https://code.angularjs.org/1.5.0-rc.0/angular.min.js'></script>
    </head>
    <body ng-app="myApp">
        <div ng-controller='thecontroller'>
       <div class="container" id="inputDiv">
            <div>
                <input type="text" class="form-control" ng-model="idNumber">
            </div>
        </div>
         <div class="container col-md-12">
            <table class="table table-hover">
                <thead>
                <tr>
                    <th>Id number</th>
                    <th>Name</th>
                    <th>Type</th>
                    <th>Status</th>
                </tr>
                </thead>
                <tbody>
                <tr ng-repeat="data in idData">
                    <td>{{data.id}}</td>
                    <td>{{data.name}}</td>
                    <td>{{data.dokumenttype}}</td>
                    <td>
                      <span ng-if="data.id === idNumber">
                        <span>test</span>
                      </span>
                    </td>                    
                </tr>
                </tbody>
            </table>
        </div>
        </div>
    </body>
</html>