ng-hide и ng-show не работают только на определенной странице AngularJS

Для страницы просмотра сведений об устройстве, которую я создаю, я использовал директивы Angular ng-show и ng-hide, чтобы изменить отображение кнопок в соответствии с цветом состояния устройства. Я получаю цвет из базы данных, используя {{item.transaction_Mode}}. Кажется, что часть Angular работает, поскольку она правильно выводит «true» и «false», но когда она сочетается с ng-show, например ng-show='true', она не работает.

HTML-код :-

Часть генерации цвета -

<div  style="width: 30%; float: left">
                    <div ng-show="{{item.transaction_Mode == 'red'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: red;float: left; " > </div>     
                    <div ng-show="{{item.transaction_Mode == 'orange'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: orange;float: left; " > </div>     
                    <div ng-hide="{{item.transaction_Mode == 'red'}} || {{item.transaction_Mode == 'orange'}}" class="col s1 m1 l1 vertical-line" style="height: 100%;width: 10px; background-color: green;float: left; " > </div>     
                    <h1  style="text-align: left">{{devices[whichItem].name}} - [id  {{devices[whichItem].device_ID}}] </h1>
</div>

Отображение кнопок в соответствии с цветовой частью -

<div  style="width: 70%; float: left; "> 


                   <button ng-hide="{{item.transaction_Mode == 'red'}} || {{item.transaction_Mode == 'orange'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px;" type="button" data-target="modal1" class="Now waves-effect waves-light btn modal-trigger" >Now</button>
                    <p style="width: 3%; float: left"> </p>
                    <button  style="margin-top:  20px; width: 17%; float: left; height: 46px;" type="button" data-target="modal2" class="Later waves-effect waves-light btn modal-trigger ">Later</button>
                    <p style="width: 3%; float: left"> </p>
                    <button ng-show="{{item.transaction_Mode == 'orange'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px;" type="button" class="waves-effect waves-light btn " >Get</button>
                    <p style="width: 3%; float: left"> </p>
                    <button ng-show="{{item.transaction_Mode == 'orange'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px; " type="button" data-target="modal4" class="Cancel waves-effect waves-light btn modal-trigger" >Cancel</button>
                    <p style="width: 3%; float: left"> </p>
                    <button ng-show="{{item.transaction_Mode == 'red'}}" style="margin-top:  20px; width: 17%; float: left; height: 46px; " type="button" data-target="modal3" class="Return waves-effect waves-light btn modal-trigger" >Return</button>

</div>

Но этот же код работает еще на двух страницах, и я не могу понять, почему он не работает на этой. ng-if или ng-switch-when тоже не работает. Будем признательны за любую помощь, Заранее спасибо!