Angular Show/Hide <object> element

Question

I have a list of files of different formats. What I want to achieve is a gallery with preview functionality. Everything works great if you click through items of the same format (e.g jpg) but when I click on a SWF file it creates correctly the <object> element and I get the preview but, if after previewing an SWF I click on a JPEG file, it shows me previews for both elements, <object> and <img>.

How can I Show/Hide <object> elements?

Below is the code that I'm using:

<ng-object ng-if="file.format == 'swf'"
    width="{{file.width}}"
    height="{{file.height}}"
    ng-data="{{file.url}}">
</ng-object>

<img ng-if="file.format != 'swf'" ng-src="{{file.url}}" />

Answer 1

@Yauheni Leichanok Thanks for your comment. It worked great for me.

ng-show was the correct answer.