Angular custom directive to use an if condition in ng-repeat

I am using panels to display the response which is dynamic in nature. I want to differentiate the panels using 2 different colors i.e., if the response has a status of positive, the panel or panel’s header must be green. If the status is negative, it must be red. since i’m using a custom directive, I’m not able to use ng-if.

How do i do this ?

CUSTOM DIRECTIVE:

app.directive('showHide', function() {
  return {
    restrict: 'E',
    scope: {
      items : '=',

    },
    template:
      '<div class="panel panel-default  panel-danger ">
         <div class="panel-heading panel-height" ng-repeat="item in items">
           <h3 class = "panel-title">
             <p class="font">ID: {{item.Id}}</p></h3><br>
        <p class="font">DESCRIPTION: {{item.Desc}}</p><br>
        <p class="font">STATUS: {{item.Status}}</p><br>
         </div></div></div>',
  };
});

HTML FILE:

<div class="row" ng-if="showresult" id="successalert">
    <br>
    <br>
     <!-- <div class="row"> 
             <div class="col-lg-3 col-md-6">  -->

                <div ng-repeat="list in itemsList">
                    <show-hide items="list"></show-hide>
                </div>

            </div>
        </div>

JS FILE:

$scope.itemsList = [[
            {
              Id: '2343',
              Desc: 'Not Found',
              Status:'Negative'

            },
            {
              Id: '124213',
              Desc: 'Found',
              Status:'Positive'

            }]]

I expect the output panel to be in green if the status is positive or red if the status is negative

Source: AngularJS