AngularJS 1 - CSS breaks when switching tabs

My home page on load is as below:

Originally some of the lines were filled with background color (blue) using the ng class, here is the "line-answer-call" as you can see below:

<tr ng-repeat="item in list" ng-class="{'row-answered-call': item.state === 'active', 'row-hovered' : item.hovered, 'row-selected': item.selected," ng-mouseover="highlight(item)" ng-dblclick="goToDetails(item)">


.row-answered-call  {
    background-color: g-hover !important;
}

      

        
        
        
      

    

The problem came after going to the next tab, replace the "Type" column with the user's photo (this also increases the row height). I used a variable (currentView) to keep track of which etc will be displayed:

<td ng-hide="currentView === 0" style="width: 8%">
    <div ng-if="item.type === CallTypes.VIDEO_CALL" class="table-group-thumb" style="background-image: url('{{item.thumbnailUrl}}')"></div>
    <div ng-if="item.type === CallTypes.MESSAGE" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_MESSAGE}}" /></div>
    <div ng-if="item.type === CallTypes.VOICE_CALL" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_VOICE_CALL}}" /></div></td>
<td style="width: 8%" ng-show="currentView === 0">
    <i ng-class="{'icon--guardian-phone': item.type === CallTypes.VOICE_CALL, 'icon--guardian-message': item.type === CallTypes.MESSAGE, 'icon--guardian-video-call': item.type === CallTypes.VIDEO_CALL}"></i>
</td>

      

        
        
        
      

    

The css has crashed now. The lines were not filled in correctly. I think this is because the line height was changed and the css was not re-loaded after that. Does anyone know about this issue, please give me some tips or ideas to solve this problem.

--- Updated May 8, 2017 - 11:41 AM

I merged 2 tds and changed from ng-hide and ng-show to ng-if.

<td style="width: 8%">
     <div ng-if="currentView !== 0 && item.type === CallTypes.VIDEO_CALL" class="table-group-thumb" style="background-image: url('{{item.thumbnailUrl}}')"></div>
     <div ng-if=" currentView !== 0 && item.type === CallTypes.MESSAGE" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_MESSAGE}}" /></div>
     <div ng-if=" currentView !== 0 && item.type === CallTypes.VOICE_CALL" class="table-group-thumb"><img ng-src="{{ROOT_URL + ImagePaths.COLORED_VOICE_CALL}}" /></div>
     <i ng-if="currentView === 0" ng-class="{'icon--guardian-phone': item.type === CallTypes.VOICE_CALL, 'icon--guardian-message': item.type === CallTypes.MESSAGE, 'icon--guardian-video-call': item.type === CallTypes.VIDEO_CALL}"></i>
</td>

      

        
        
        
      

    

Checking the HTML as well as these tr, td's see no problem, the background-color property contains the correct value, but in fact the css still crashed like my screenshots above.

Thanks,
Ken